Si può aggiungere interruzioni di riga al: dopo elemento pseudo?

Question

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.

Answer 1

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.

Answer 2

È 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à.

Answer 3

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