El pseudoelemento ::before

El pseudoelemento before permite añadir una pseudoetiqueta dentro de otro elemento y darle estilo con CSS. El contenido de esa pseudoetiqueta se define con la propiedad content.

Por ejemplo, tenemos este HTML:

<div class="queen heart">
  <em>Reina</em>
</div>

Añadamos una regla CSS con un selector poco habitual que lleva dos puntos dobles:

.heart::before { content: "Corazones"; }

El resultado se puede representar así:

<div class="queen heart">
  <before>Corazones</before>
  <em>Reina</em>
</div>

¡Pero el código HTML original no cambia! La etiqueta <before> no se añade al código de la página: existe de forma «virtual» en el navegador. Por eso usamos el prefijo pseudo.

La pseudoetiqueta se comporta como un <span> normal con texto. Puedes darle más estilos, por ejemplo:

.heart::before {
  content: "Corazones";
  color: red;
}

Para que aparezca el pseudoelemento, debes definir la propiedad content. Basta con una cadena vacía como valor: content: "";.