¿Puedes agregar saltos de línea al: después del pseudo elemento?

Question

Quiero agregar un <br /> a una clase en particular. El uso de: after pseudo class simplemente muestra <br /> como texto.

¿Hay alguna manera de que esto funcione?

Es interno para IE8 por lo que los problemas del navegador no son un problema. Si lo hago

<span class="linebreakclass">cats are</span> brilliant 

Quiero que aparezca "brillante" en una nueva línea.

Answer 1

Usted no será capaz de hacer que las etiquetas HTML, pero se puede establecer el estilo de esta manera:

.needs-space:after 
{ 
    content: " "; 
    display: block; 
    clear: both; /* if you need to break floating elements */ 
} 

El ajuste más importante aquí es display: block; Esto hará que : después contenido dentro de un DIV. Y este pseudo elemento es compatible con todos los navegadores más recientes. Incluyendo IE. Al decir esto, debe conocer a sus usuarios y sus navegadores.

Answer 2

Se pone peor - el: after class ni siquiera funciona en IE6 (y probablemente también en otros navegadores).

Creo que lo que realmente quiere aquí es un margen en la parte inferior del elemento, para proporcionar espacio.

Simplemente

.myElement { 
    margin-bottom: 1em; 
} 

Answer 3

Puede utilizar \A secuencia de escape, lo que hará que como un salto de línea:

.new-line:after { 
    white-space: pre-wrap; 
    content: "\A"; 
} 

Este método se menciona en la CCS 2.1 Specification para la propiedad content:

Autores pueden incluir saltos de línea en la generada contenido al escribir la secuencia de escape "\A" en una de las cadenas después de la propiedad 'content' . Este salto de línea insertado todavía está sujeto a la propiedad 'white-space'.