Pouvez-vous cibler <br /> avec css?

Est-il possible de cibler la <br/>balise de saut de ligne avec CSS?

Je voudrais avoir une ligne pointillée 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 code HTML défini, sinon j'utiliserais une autre méthode.

Je ne pense pas que ce soit possible, mais il y a peut-être un moyen que quelqu'un connaisse.

BRgénère un saut de ligne et ce n'est qu'un saut de ligne. Comme cet élément n'a pas de contenu, il n'y a que quelques styles qui ont du sens à y appliquer, comme clearou position. Vous pouvez définir BRla bordure de ce dernier mais vous ne le verrez pas car il n'a pas de dimension visuelle.

Si vous aimez séparer visuellement deux phrases, vous voudrez probablement utiliser la règle horizontale qui est destinée à cet objectif. Puisque vous ne pouvez pas changer le balisage, j'ai bien peur qu'en utilisant uniquement CSS, vous ne pouvez pas y parvenir.

Il semble que cela ait déjà été discuté sur d'autres forums. Extrait de Re: Définition de la hauteur d'un élément BR à l'aide de CSS :

[C] e conduit à un statut quelque peu étrange pour BR en ce que d'une part 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'autre part, il est traité comme un élément normal en ce que (un sous-ensemble limité de) propriétés CSS y sont autorisées.

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

Les propriétés et valeurs CSS1 actuelles 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 futures versions de CSS peuvent gérer le contenu ajouté et remplacé, mais les formateurs basés sur CSS1 doivent traiter spécialement «BR».

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

Mettre à jour

pelms a fait quelques recherches supplémentaires et a souligné que IE8 (sur Win7) et Chrome 2 / Safari 4b vous permet de créer BRun peu de style . Et en effet, j'ai vérifié la page de démonstration d' IE avec le moteur IE8 d' IE Net Renderer , et cela a fonctionné.

Mise à jour 2 C69 fait d'autres enquêtes, et il se trouve que vous pouvez le style de la marque pour brassez fortement (mais pas multi-navigateur), mais cela n'affectera pas la rupture de ligne elle - même, parce qu'il semble appartenir à conteneur parent.

Essayez ce qui suit, je l'ai assemblé à l'aide de la mise à jour 2 d'une autre réponse avec des votes élevés, et cela a parfaitement fonctionné pour moi:

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

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

Quand cela fait partie du code, vous ne voulez pas (ou ne pouvez pas) changer et vous voulez que ce particulier <br>ne soit pas affiché.

.xxx br {display:none}

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

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

br {
    border-bottom:1px dashed black;
}

ne marche pas.

Il 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 il n'a fonctionné dans aucun des leur. Si, à un moment donné dans le futur, quelqu'un trouve un navigateur qui prend en charge une bordure sur un <br>élément, n'hésitez pas à mettre à jour cette liste.

Notez également que j'ai essayé un certain nombre d'autres choses:

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

Parmi ceux-ci, ce qui suit fonctionne dans Opera 9.6 et 10 (alpha) (merci porneL!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

Pas très utile quand il n'est pris en charge que dans un navigateur, mais je trouve toujours intéressant de voir comment différents navigateurs implémentent la spécification.

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 pouvez faire

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

br { padding: 1px 8px; border-bottom: 1px dashed #000 }

rend comme ci-dessous dans IE8 ... pas beaucoup d'utilisation dans un seul navigateur cependant.

(NB j'utilise IE 8.0.7100 (sur Win7 RC) si cela fait une différence)

Aussi,

br:after { content: "..." }  
br { content: "" }`

ou,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

donne une ligne en pointillé dans Chrome 2 / Safari 4b mais perd le saut de ligne qui (à moins que quiconque ne puisse trouver un moyen de le réintroduire) le rend moins qu'inutile.

par exemple
test de IE8 , Chrome / test Safari et une autre

Mes propres tests montrent de manière concluante que les brbalises n'aiment pas être ciblées pour le CSS.

Mais si vous pouvez ajouter du style, vous pouvez probablement également ajouter une balise de script à l'en-tête de la page? Lien vers un externe .jsqui fait quelque chose comme ceci:

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    elems = element.getElementsByTagName( 'br' );
    for ( var i = 0; i < elems.length; i ++ )
    {
        br = elems.item( i );
        hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

Bref, ce n'est pas optimal, mais voici ma solution.

cela semble résoudre le problème:

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>

BR est un élément en ligne, pas un élément de bloc.

Donc, vous avez besoin de:

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

Sinon, les navigateurs qui sont un peu plus sélectifs sur de telles choses refuseront d'appliquer des bordures à vos éléments BR, car les éléments en ligne n'ont pas de bordures, de remplissage ou de marges.

MISE À JOUR 13/09/2019:

Le but de styliser la <br>balise comme ceci est de faire un saut de ligne "plus grand" (c'est-à-dire avec un peu d'espace supplémentaire entre les lignes).

La classe "oldbig" (ci-dessous) a été testée et fonctionnait correctement dans Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 et IE 11.48.17134.0, au style. Malheureusement, il a cassé dans la version 76 de Chrome et ses dérivés (vers août 2019). Le symptôme est que l'espace supplémentaire entre les lignes n'est plus affiché.

La classe "newbig" est testée et fonctionne correctement dans les versions actuelles de Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave et Palemoon:

br.oldbig {line-height:190%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

Voici une démo:

br.oldbig {line-height:175%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

<p style="max-width:20em">This is a paragraph which demonstrates the difference 
 between a line-break which occurs when the text exceeds the max-width, and a 
 line-break forced by a &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

Voici le résultat, affiché dans Chrome v.76:

Cela fonctionnera, mais uniquement dans IE. Je l'ai testé dans IE8.

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }

J'ai placé une <br>balise dans une <span>étiquette et a été en mesure d'utiliser display:none;le <span>au contrôle quand ne pas utiliser l' <br>étiquette à l' aide des médias Requêtes.

vieille question mais c'est une solution assez soignée et propre, pourrait être utilisée pour les personnes qui se demandent encore si c'est possible :):

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

avec ce correctif, vous pouvez également supprimer les BR sur les sites Web (il suffit de définir la largeur sur 0px)

Pourquoi ne pas simplement utiliser le tag HR? Il est fait exactement pour ce que vous voulez. Un peu comme essayer de faire une fourchette pour manger de la soupe quand il y a une cuillère juste devant vous sur la table.