Se puede añadir saltos de línea al: después de pseudo elemento?

Question

Quiero añadir una <br /> a una clase particular. Uso de la:. Después de la clase de pseudo simplemente muestra <br /> como texto

¿Hay una manera de hacer este trabajo?

Es interno para IE8 así problemas con el navegador no son un problema. Si hago

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

Quiero "brillante" que aparecen 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 */
}

La configuración principal aquí es display: block; Esto hará que después contenido dentro de un DIV. Y este elemento seudo es soportado por todos los navegadores más recientes. Incluyendo IE. Diciendo esto, usted debe ser consciente de sus usuarios y sus navegadores.

Answer 2

Puede utilizar la secuencia de escape \A, lo que hará que como una nueva línea:

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

Este método se menciona en la CCS 2.1 Especificación para la propiedad content:

  

Los autores pueden incluir saltos de línea en el contenido generado por escrito la   "\A" secuencia de escape en una de las cuerdas después de la 'content'   propiedad. Este salto de línea insertada aún está sujeta a la    'white-space' propiedad.

Answer 3

Se pone peor - la:. Después de la clase ni siquiera funciona en IE6 (y probablemente algunos otros navegadores también)

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

Simplemente

.myElement {
    margin-bottom: 1em;
}