Si può aggiungere interruzioni di riga al: dopo elemento pseudo?
-
16-09-2019 - |
Domanda
Voglio aggiungere un <br />
a una determinata classe. Utilizzando il:. Dopo le lezioni pseudo visualizza semplicemente <br />
come testo
C'è un modo per fare questo lavoro?
E 'interna per IE8 in modo problemi di browser non sono un problema. Se faccio
<span class="linebreakclass">cats are</span> brilliant
che voglio "geniale" per apparire su una nuova linea.
Soluzione
Non sarà in grado di rendere i tag HTML, ma è possibile impostare lo stile in questo modo:
.needs-space:after
{
content: " ";
display: block;
clear: both; /* if you need to break floating elements */
}
L'impostazione principale qui è display: block;
Questo renderà : dopo il contenuto all'interno di un DIV
. E questo elemento pseudo è supportato da tutti i browser più recenti. Compreso IE. Dicendo questo si deve essere consapevoli dei vostri utenti e le loro browser.
Altri suggerimenti
È possibile utilizzare \A
sequenza di escape, che renderà come una nuova riga:
.new-line:after {
white-space: pre-wrap;
content: "\A";
}
Questo metodo è stato menzionato nel CCS 2.1 Specifiche per la proprietà content
:
Gli autori possono includere nuove righe nei contenuti generati scrivendo il
"\A"
sequenza di escape in una delle stringhe dopo la'content'
proprietà. Questa interruzione di linea inserita è ancora soggetta alla'white-space'
proprietà.
La situazione peggiora - il:. Dopo le lezioni non ha nemmeno funziona in IE6 (e probabilmente alcuni altri browser troppo)
Credo che ciò che si vuole veramente: ecco un margine sul fondo dell'elemento, per fornire la spaziatura.
Semplicemente
.myElement {
margin-bottom: 1em;
}