Los  pseudo-elementos ::before y ::after se utilizan en combinación con la  propiedad content de CSS para añadir contenidos antes o después del contenido original de un elemento.

Esta técnica es de utilidad a la hora de asociar recursos visuales específicos a elementos de una composición manteniendo la diferenciación entre contenido y estilo, como en los casos en los que queremos resaltar ciertos items de una lista (ver primer ejemplo) en los que una imagen nos indica “novedad”, pero esta no forma parte del contenido. De igual forma, su versatilidad nos permite orientar su uso hacia un ámbito estético, permitiendo un mayor nivel de reusabilidad y escalabilidad en nuestro código.

Ejemplo 1: resaltar elementos

Este Pen muestra cómo incluir recursos gráficos que siendo independientes del contenido resaltan algunos elementos del plano y permiten un código más liviano, reutilizable y organizado, además de ser óptimo como parte de un CMS que se limitaría a añadir una clase en el contenedor de cada item destacado:

Dos sencillas clases se ocupan de posicionar recursos visuales en los items dotado de la clase .oferta (el segundo y el cuarto en el ejemplo superior):

Ejemplo 2: superposición de velado cromático

Frente a un texto superpuesto sobre una imagen, un velado cromático no sólo es un elemento esencial para la legibilidad del mismo, sino que como recurso estético aporta un aire elegante al producto y reduce el impacto cromático de la imagen.

Un sistema de reglas de CSS aplican a cualquier elemento con la clase .velo una capa cromática, pudiendo ser extendido fácilmente para cubrir diversos colores y opacidades de velo:

Ejemplo 3: estilizado con líneas laterales

Podemos añadir filetes laterales en sendos extremos de títulos o subtítulos incorporando un borde en cada pseudo-elemento absoluto, y aplicando los anchos deseados de forma sencilla:

Un sistema de reglas de CSS aplican a cualquier elemento con la clase .estilizado bordes laterales centrados en el eje vertical y, en este caso, de 40 píxeles de ancho: