Puoi scegliere come target <br /> con css?

È possibile scegliere come target il <br/>tag di interruzione di riga con CSS?

Vorrei avere una linea tratteggiata 1px ogni volta che c'è un'interruzione di linea. Sto personalizzando un sito con il mio CSS e non posso cambiare il codice HTML impostato, altrimenti userei in un altro modo.

Non penso sia possibile, ma forse c'è un modo che qualcuno conosce.

BRgenera un'interruzione di riga ed è solo un'interruzione di riga. Dato che questo elemento non ha contenuto, ci sono solo pochi stili che hanno senso applicare su di esso, come clearo position. Puoi impostare BRil bordo ma non lo vedrai in quanto non ha dimensione visiva.

Se ti piace separare visivamente due frasi, allora probabilmente vuoi usare il righello orizzontale che è destinato a questo obiettivo. Dal momento che non è possibile modificare il markup, temo che utilizzando solo CSS non è possibile ottenere questo risultato.

Sembra che sia già stato discusso su altri forum. Estrai da Re: impostazione dell'altezza di un elemento BR utilizzando CSS :

[T] conduce a uno stato alquanto strano per BR in quanto da un lato non viene trattato come un elemento normale, ma invece come un'istanza di \ A nel contenuto generato, ma dall'altro viene trattato come un elemento normale in questo (un sottoinsieme limitato di) proprietà CSS è consentito su di esso.

Ho anche trovato un chiarimento nella specifica CSS 1 (nessuna specifica di livello superiore lo menziona):

Le proprietà e i valori CSS1 correnti non possono descrivere il comportamento dell'elemento 'BR'. In HTML, l'elemento 'BR' specifica un'interruzione di riga tra le parole. In effetti, l'elemento viene sostituito da un'interruzione di riga. Le versioni future di CSS potrebbero gestire contenuti aggiunti e sostituiti, ma i formattatori basati su CSS1 dovranno trattare 'BR' in modo speciale.

I test di Grant Wagner mostrano che non c'è modo di modellare BRcome si può fare con altri elementi. C'è anche un sito online in cui è possibile testare i risultati nel browser .

Aggiornare

pelms ha fatto ulteriori indagini e ha sottolineato che IE8 (su Win7) e Chrome 2 / Safari 4b ti permettono di modellare BRun po '. E in effetti, ho controllato la pagina demo di IE con il motore IE8 di IE Net Renderer e ha funzionato.

Update 2 C69 fatto alcuni ulteriori indagini, e si scopre che si può lo stile del marcatore per brpiuttosto pesantemente (anche se, non cross-browser), ma ciò non pregiudica la linea-break se stesso, perché sembrano appartenere al contenitore principale.

Prova quanto segue, l'ho messo insieme usando l'Update 2 da un'altra risposta con voti alti e ha funzionato perfettamente per me:

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

C'è una buona ragione per cui dovresti progettare un <br>tag.

Quando fa parte del codice, non si desidera (o non è possibile) modificare e si desidera che questo particolare <br>non venga visualizzato.

.xxx br {display:none}

Può risparmiare molto tempo e talvolta la tua giornata.

A beneficio di eventuali visitatori futuri che potrebbero aver perso i miei commenti:

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

non funziona.

È stato testato in IE 6, 7 e 8, Firefox 2, 3 e 3.5B4, Safari 3 e 4 per Windows, Opera 9.6 e 10 (alfa) e Google Chrome (versione 2) e non ha funzionato in nessuno dei loro. Se in futuro qualcuno troverà un browser che supporta un bordo su un <br>elemento, non esitare ad aggiornare questo elenco.

Si noti inoltre che ho provato una serie di altre cose:

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

Di questi, il seguente funziona in Opera 9.6 e 10 (alpha) (grazie porneL!):

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

Non molto utile quando è supportato solo in un browser, ma trovo sempre interessante vedere come diversi browser implementano la specifica.

So che non puoi modificare l'HTML, ma se puoi modificare il CSS, puoi aggiungere javascript?

in tal caso, puoi includere jquery, quindi puoi farlo

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

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

viene visualizzato come di seguito in IE8 ... tuttavia, non è molto utile in un solo browser.

(NB sto usando IE 8.0.7100 (su Win7 RC) se questo fa la differenza)

Anche,

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

o,

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

br { content: "" }

fornisce una linea tratteggiata in Chrome 2 / Safari 4b ma perde l'interruzione di linea che (a meno che qualcuno non riesca a trovare un modo per reintrodurlo) la rende meno che inutile.

ad esempio
test IE8 , test Chrome / Safari e altro

I miei test dimostrano definitivamente che ai brtag non piace essere scelti come target per i CSS.

Ma se puoi aggiungere stile, probabilmente puoi anche aggiungere un tag script all'intestazione della pagina? Link a un esterno .jsche fa qualcosa del genere:

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

Quindi in breve, non è ottimale, ma ecco la mia soluzione.

questo sembra risolvere il 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 è un elemento inline, non un elemento block.

Quindi, hai bisogno di:

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

Altrimenti, i browser che sono un po 'più esigenti su tali cose si rifiuteranno di applicare bordi ai tuoi elementi BR, poiché gli elementi in linea non hanno bordi, riempimento o margini.

AGGIORNATO 13/09/2019:

Lo scopo di dare uno stile al <br>tag in questo modo è quello di creare un'interruzione di linea "più grande" (cioè con un po 'di spazio in più tra le linee).

La classe "oldbig" (sotto) è stata testata e ha funzionato correttamente in Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 e IE 11.48.17134.0, in stile. Sfortunatamente, ha rotto nella versione 76 di Chrome e suoi derivati ​​(circa agosto 2019). Il sintomo è che lo spazio extra tra le linee non viene più visualizzato.

La classe "newbig" è testata e funziona correttamente nelle versioni correnti di 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;}

Ecco una demo:

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>

Questo è il risultato, visualizzato in Chrome v.76:

Funzionerà, ma solo in IE. L'ho provato in IE8.

br {

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

Ho messo un <br>tag in un <span>tag ed è stato in grado di utilizzare display:none;il <span>per controllo quando non utilizzare il <br>tag utilizzando Media Queries.

vecchia domanda ma questa è una soluzione piuttosto ordinata e pulita, potrebbe venire in uso per le persone che si stanno ancora chiedendo se è possibile :):

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

con questa correzione puoi anche rimuovere i BR sui siti web (basta impostare la larghezza su 0px)

Perché non usare semplicemente il tag HR? È fatto esattamente per quello che vuoi. Un po 'come provare a fare una forchetta per mangiare la zuppa quando c'è un cucchiaio proprio davanti a te sul tavolo.