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 permite incorporar recursos visuales de manera automática en etiquetas, ahorrando tiempo de desarrollo y salvaguardando la naturaleza estética de estas adhesiones, en lugar de ser incluídas como contenidos. Aprovecharlos supone, además, dotar al código de un mayor nivel de reusabilidad y escalabilidad asi como una mejor mantenibilidad.

Si buscas usos más avanzados para estos recursos de los que explico aquí, visita la segunda entrada sobre ejemplos prácticos con pseudo-elementos ::before y ::after.

Ejemplo 1: destacado de elementos

Este Pen muestra cómo incluir, a través de una única clase, recursos gráficos que siendo independientes del contenido resaltan algunos elementos del plano y permiten un código más liviano, reutilizable y organizado:

CSS incorpora varios recursos visuales en los items dotados de la clase .oferta:

.oferta::before {
  content: "";
  background: url('https://www.cosasdigitales.com/wp-content/uploads/oferta.png') no-repeat center / contain;
  width: 60px;
  height: 60px;
  position: absolute;
  left: -20px;
  top: -10px
}

.oferta b::before {
  content: "!";
  color: red;
  font: 8em impact bold;
  transform: rotate(10deg);
  top: -100%;
  right: -15px;
  position: absolute
}

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 su legibilidad, sino que aporta un aspecto elegante al producto, a la vez que limita el impacto cromático de la imagen.

Un sistema de reglas de CSS superponen sobre cualquier elemento con la clase .velo una capa semi transparente, un sistema fácilmente escalable en vistas a versionar colores u opacidades del velo:

[class*="velo-"] {
  position: relative;
}

[class*="velo-"]::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 1;
}

.velo-50::before {
  background-color: rgba(0, 0, 0, .5);
}

.velo-80::before {
  background-color: rgba(0, 0, 0, .8);
}

Ejemplo 3: ornamentación

Resulta sencillo añadir filetes laterales en sendos extremos de títulos o subtítulos, incorporando un borde en cada pseudo-elemento y controlando su longitud:

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:

.estilizado{
  display: inline-block;
  position: relative
}

.estilizado::after, .estilizado::before {
    border-bottom: 1px solid #000;
    bottom: 50%;
    content: "";
    margin: 0 10px;
    position: absolute;
    width: 40px
}

.estilizado::before {
    left: -60px
}

.estilizado::after {
    right: -60px
}

¿Buscas más? Entonces visita la continuación con ejemplos prácticos avanzados con pseudo-elementos ::before y ::after.