[Résolu] Créer un saut à la ligne avec :after

Bonjour,

Dans un formulaire, j'ai une série d'input radio avec labels qui sont en ligne.

<input type="radio" name="zonepostale" id="zpF" value="F" checked="checked" /><label for="zpF">France et Dom/Tom</label>
<input type="radio" name="zonepostale" id="zpA" value="A" /><label for="zpA">Union europ&eacute;enne</label>
<input type="radio" name="zonepostale" id="zpS" value="S" /><label for="zpS">Suisse</label>
<input type="radio" name="zonepostale" id="zpB" value="B" /><label for="zpB">Autre</label>

Dans un site responsive, je veux sur les petits écrans provoquer un saut à la ligne derrière chaque label.
C'est très facile à faire en ajoutant un container, par exemple p, display inline ou block.

Sans changer la structure, j'ai essayé avec :after

input[type=radio]+label:after {content: "<br />"}

Ne marche pas du tout.
<br /> provoque un gros message d'erreur du débogueur html.
Est-ce juste qu'il faut coder autrement le saut à le ligne ?

Ma piste de :after est-elle bonne ?

Merci d'avance.
Modifié par boteha_2 (24 Apr 2016 - 15:55)

Salut,

Tu as tenté ça :

label::after{
  content:'';
  display: block;
}

Normalement, ça suffit...

Bonjour MatthieuR,

Merci de ta réponse, c'est simple et clair.

Pour le sélecteur je suis obligé de faire un peui compliqué car il y a dans la page d'autres labels qui doivent rester en ligne.

Je teste pendant le week-end au plus tard, je te tiens au courant.

Bonjour,

input[type=radio]+label::after {content:""; display: block}

Fonctionne parfaitement, merci.

A cette occasion je me suis aperçu qu'il était prudent de faire un reset pour input[type=radio], même si j'utilise le reset général de Meyer :

input[type=radio] {padding: 0; margin: 0}

Dernière petite question : y a-t-il intérêt à utiliser ::after plutôt que :after alors que ::after n'est pas pris en charge par de vieux navigateurs qui comprennent :after qui lui est compris par tous les navigateurs récents ?
Modifié par boteha_2 (24 Apr 2016 - 16:07)