Pouvez-vous cibler <br /> avec css?

Question

Est-il possible de cibler la balise de saut de ligneavec CSS?

J'aimerais avoir une ligne en pointillés de 1px chaque fois qu'il y a un saut de ligne. Je personnalise un site avec mon propre CSS et je ne peux pas modifier le HTML existant, sinon j'utiliserais une autre méthode.

Je ne pense pas que ce soit possible mais peut-être qu'il y a une astuce que quelqu'un connaît.

Answer 1

Techniquement, oui, vous pouvez cibler unélément avec du CSS directement ou en lui appliquant une classe et en ciblant la classe. Cela étant dit, ungénère un saut de ligne et c'est uniquement un saut de ligne. Comme cet élément n'a pas de contenu, il n'y a que quelques styles qui ont du sens à lui appliquer, comme clear ou position. Vous pouvez définir la bordure demais vous ne la verrez pas car il n'a pas de dimension visuelle.

Si vous souhaitez séparer visuellement deux phrases, alors vous voudrez probablement utiliser le séparateur horizontal qui est destiné à cet objectif. Comme vous ne pouvez pas modifier le balisage, je crains qu'avec seulement du CSS, vous ne puissiez pas y parvenir.

Il semble que cela a déjà été discuté sur d'autres forums. Extrait de Re: Setting the height of a BR element using CSS:

[C]ela conduit à un état quelque peu étrange pour BR en ce sens qu'il n'est pas traité comme un élément normal, mais plutôt comme une instance de \A dans le contenu généré, mais d'un autre côté il est traité comme un élément normal en ce sens que (un sous-ensemble limité de) les propriétés CSS sont autorisées à son sujet.

J'ai également trouvé une clarification dans la spécification CSS 1 (aucune spécification de niveau supérieur ne le mentionne) :

Les propriétés et valeurs actuelles de CSS1 ne peuvent pas décrire le comportement de l'élément ‘BR’. En HTML, l'élément ‘BR’ spécifie un saut de ligne entre les mots. En effet, l'élément est remplacé par un saut de ligne. Les versions futures de CSS pourront gérer des contenus ajoutés et remplacés, mais les formateurs basés sur CSS1 doivent traiter ‘BR’ de manière spéciale.

Les tests de Grant Wagner montrent qu'il n'y a aucun moyen de styliser BR comme vous le feriez avec d'autres éléments. Il existe également un site en ligne où vous pouvez tester les résultats dans votre navigateur.

Pelms a mené plus de recherches, et a indiqué que IE8 (sous Win7) et Chrome 2/Safari 4b permettent en quelque sorte de styliser BR. Et en effet, j'ai vérifié la page de démonstration d'IE avec le moteur IE8 de IE Net Renderer, et cela a fonctionné.

C69 a mené plus de recherches, et il s'avère que vous pouvez styliser le marqueur pour br de manière assez poussée (bien que non compatible avec tous les navigateurs), mais cela n'affectera pas le saut de ligne lui-même, car il semble appartenir au conteneur parent.

Answer 2

Essayez ce qui suit, je l'ai mis en place en utilisant la mise à jour 2 d'une autre réponse avec un grand nombre de votes, et cela a parfaitement fonctionné pour moi :

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

Answer 3

Il y a une bonne raison pour laquelle vous auriez besoin de styliser une balise.

Quand elle fait partie du code que vous ne voulez pas (ou ne pouvez pas) changer et que vous voulez que ceen particulier ne soit pas affiché.

.xxx br {display:none}

Peut vous faire gagner beaucoup de temps et parfois votre journée.

Answer 4

Pour le bénéfice de tout visiteur futur qui aurait manqué mes commentaires :

br {
    border-bottom:1px en pointillés noir;
}

ne fonctionne pas.

Cela a été testé dans IE 6, 7 et 8, Firefox 2, 3 et 3.5B4, Safari 3 et 4 pour Windows, Opera 9.6 et 10 (alpha) et Google Chrome (version 2) et cela n'a fonctionné dans aucun d'entre eux. Si à un moment donné quelqu'un trouve un navigateur qui supporte une bordure sur un élément, n'hésitez pas à mettre à jour cette liste.

Notez également que j'ai essayé plusieurs autres choses :

br {
    border-bottom:1px en pointillés noir;
    display:block;
}

br:before { /* et :after */
    border-bottom:1px en pointillés noir;
    /* contenu et affichage ajoutés selon le commentaire de porneL */
    content: "";
    display: block;
}

br { /* et :before et :after */
    content: url(une_image_de_ligne_en_pointillés);
}

De ceux-là, la suivante fonctionne dans Opera 9.6 et 10 (alpha) (merci porneL !) :

br:after {
    border-bottom:1px en pointillés noir;
    content: "";
    display: block;
}

Peu utile quand ce n'est supporté que dans un seul navigateur, mais je trouve toujours intéressant de voir comment les différents navigateurs implémentent la spécification.

Answer 5

Je sais que vous ne pouvez pas modifier le HTML, mais si vous pouvez modifier le CSS, pouvez-vous ajouter du javascript?

Si c'est le cas, vous pouvez inclure jQuery, alors vous pourriez faire

$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});