Añadir pseudoelementos con ::before y ::after

En esta lección insertarás contenido decorativo antes o después de un elemento sin escribirlo en el HTML.

::before y ::after crean un elemento virtual dentro del seleccionado, y la propiedad content define lo que aparece. content es obligatoria: sin ella, aunque sea con un valor vacío content: "", el pseudoelemento no se genera. Se escriben con dos puntos dobles para distinguirlos de las pseudoclases.

El código de ejemplo antepone una estrella dorada a un elemento destacado y añade una coletilla gris al final de una cita. Nada de eso está en el HTML: lo genera el CSS.

Hay que saber que estos pseudoelementos no funcionan en etiquetas vacías como <img> o <input>, porque no tienen contenido dentro donde insertarlos. Y, como pasa con los contadores, el texto generado no siempre lo leen los lectores de pantalla: úsalo para decoración, no para información esencial.

En la práctica se emplean para iconos, comillas tipográficas, separadores, triángulos de globos de diálogo y el asterisco de los campos obligatorios: todo aquello que es puramente visual y no merece ensuciar el HTML.