Você pode direcionar <br /> com css?

É possível segmentar a <br/>tag de quebra de linha com CSS?

Gostaria de ter uma linha tracejada de 1px sempre que houver uma quebra de linha. Estou personalizando um site com meu próprio CSS e não posso alterar o HTML definido, caso contrário, usaria de outra maneira.

Não acho que seja possível, mas talvez haja uma maneira de alguém conhecer.

BRgera uma quebra de linha e é apenas uma quebra de linha. Como esse elemento não tem conteúdo, existem apenas alguns estilos que fazem sentido para aplicar nele, como clearou position. Você pode definir BRa borda, mas não a verá, pois não possui dimensão visual.

Se você deseja separar visualmente duas frases, provavelmente deseja usar a régua horizontal que se destina a esse objetivo. Como você não pode alterar a marcação, receio que, usando apenas CSS, você não consiga isso.

Parece, já foi discutido em outros fóruns. Extrato de Re: Configurando a altura de um elemento BR usando CSS :

[T] isso leva a um status um tanto estranho para BR, porque, por um lado, não está sendo tratado como um elemento normal, mas como uma instância de \ A no conteúdo gerado, mas, por outro lado, está sendo tratado como um elemento normal em que (um subconjunto limitado de) propriedades CSS está sendo permitido nele.

Também encontrei um esclarecimento na especificação CSS 1 (nenhuma especificação de nível superior menciona):

As propriedades e os valores atuais do CSS1 não podem descrever o comportamento do elemento 'BR'. No HTML, o elemento 'BR' especifica uma quebra de linha entre as palavras. Com efeito, o elemento é substituído por uma quebra de linha. Versões futuras do CSS podem manipular conteúdo adicionado e substituído, mas os formatadores baseados em CSS1 devem tratar 'BR' especialmente.

Os testes de Grant Wagner mostram que não há como estilizar BRcomo você pode fazer com outros elementos. Há também um site on-line onde você pode testar os resultados no seu navegador .

Atualizar

A Pelms fez algumas investigações adicionais e apontou que o IE8 (no Win7) e o Chrome 2 / Safari 4b permitem estilizar BRum pouco. De fato, verifiquei a página de demonstração do IE com o mecanismo IE8 do IE Net Renderer e funcionou.

Update 2 C69 fez algumas novas investigações, e verifica-se que você pode estilizar o marcador para brmuito fortemente (embora, não cross-browser), mas isso não afetará a linha-quebrar-se, porque parecem pertencer a contêiner pai.

Tente o seguinte, montei-o usando a Atualização 2 de outra resposta com votos altos e funcionou perfeitamente para mim:

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

Há um bom motivo para você precisar estilizar uma <br>tag.

Quando faz parte do código, você não deseja (ou não pode) alterar e deseja esse particular <br> não seja exibido.

.xxx br {display:none}

Pode economizar muito tempo e às vezes o seu dia.

Para o benefício de futuros visitantes que possam ter perdido meus comentários:

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

não funciona.

Foi testado no IE 6, 7 e 8, Firefox 2, 3 e 3.5B4, Safari 3 e 4 para Windows, Opera 9.6 e 10 (alpha) e Google Chrome (versão 2) e não funcionou em nenhum dos eles. Se em algum momento no futuro alguém encontrar um navegador que suporte uma borda em um<br> elemento, fique à vontade para atualizar esta lista.

Observe também que tentei várias outras coisas:

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);
}

Desses, o seguinte funciona no Opera 9.6 e 10 (alpha) (obrigado porneL!):

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

Não é muito útil quando é suportado apenas em um navegador, mas sempre acho interessante ver como diferentes navegadores implementam a especificação.

Sei que você não pode editar o HTML, mas se você pode modificar o CSS, pode adicionar javascript?

Nesse caso, você pode incluir jquery, então você pode fazer

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

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

processa como abaixo no IE8 ... embora não seja muito útil em apenas um navegador.

(NB eu estou usando o IE 8.0.7100 (no Win7 RC) se isso faz alguma diferença)

Além disso,

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

ou,

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

br { content: "" }

fornece uma linha tracejada no Chrome 2 / Safari 4b, mas perde a quebra de linha que (a menos que alguém possa encontrar uma maneira de reintroduzir isso) a torna menos que inútil.

por exemplo ,
teste IE8 , teste Chrome / Safari e outro

Meus próprios testes mostram conclusivamente que as brtags não gostam de ser segmentadas para css.

Mas se você pode adicionar estilo, provavelmente também pode adicionar uma tag de script ao cabeçalho da página? Link para um externo .jsque faz algo parecido com isto:

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 );
    }
}

Em resumo, não é o ideal, mas aqui está a minha solução.

isso parece resolver o problema:

<!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 é um elemento embutido, não um elemento de bloco.

Então, você precisa:

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

Caso contrário, os navegadores que são um pouco mais exigentes sobre essas coisas se recusam a aplicar bordas aos seus elementos BR, já que os elementos embutidos não têm bordas, preenchimento ou margens.

ATUALIZADO 13/09/2019:

O objetivo de estilizar a <br>tag dessa maneira é fazer uma quebra de linha "maior" (ou seja, com um pouco de espaço extra entre as linhas).

A classe "oldbig" (abaixo) foi testada e funcionou corretamente no Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 e IE 11.48.17134.0, para estilizar. Infelizmente, ele quebrou na versão 76 do Chrome e seus derivados (por volta de agosto de 2019). O sintoma é que o espaço extra entre as linhas não é mais exibido.

A classe "newbig" foi testada e está funcionando corretamente nas versões atuais do Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave e Palemoon:

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

Aqui está uma demonstração:

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>

Este é o resultado, exibido no Chrome v.76:

Isso funcionará, mas apenas no IE. Eu testei no IE8.

br {

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

Coloquei uma <br>marca em uma <span>marca e pude usá display:none;-la <span>para controlar quando não usar a <br>marca usando as Consultas de Mídia.

pergunta antiga, mas essa é uma correção bastante clara e pode ser usada por pessoas que ainda estão se perguntando se é possível :):

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

Com essa correção, você também pode remover BRs em sites (basta definir a largura para 0px)

Por que não usar apenas a tag HR? É feito exatamente para o que você deseja. É como tentar fazer um garfo para comer sopa quando há uma colher bem na sua frente na mesa.