Guía completa de los pseudo‑elementos CSS ::before y ::after

Los pseudo‑elementos son una poderosa característica de CSS que permite insertar contenido generado por el propio estilo, sin tocar el HTML. Los dos más usados son ::before y ::after, que añaden contenido antes o después del contenido real del elemento al que se aplican.

1. Sintaxis y conceptos básicos

selector::before {
  content: "Texto o símbolo"; /* obligatorio */
  /* estilos adicionales */
}

selector::after {
  content: "Texto o símbolo";
  /* estilos adicionales */
}

El atributo content es obligatorio; sin él el pseudo‑elemento no se renderiza. Además, se pueden usar valores como url() para imágenes, attr() para atributos del elemento, o incluso counter() para numeración automática.

2. Comparativa visual de ::before vs ::after

3. Ejemplos prácticos y casos de uso reales

3.1. Lista con iconos personalizados

ul.custom-icons li::before {
  content: "\f005"; /* Font Awesome star */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.5rem;
  color: #ff9800;
}

Este código reemplaza los viñetas tradicionales por estrellas.

3.2. Citas con comillas tipográficas

blockquote {
  position: relative;
  padding: 1rem 1.5rem;
  font-style: italic;
  background: #f9f9f9;
}
blockquote::before {
  content: "\201C"; /* “ */
  font-size: 4rem;
  position: absolute;
  left: 10px; top: -10px;
  color: #ccc;
}
blockquote::after {
  content: "\201D"; /* ” */
  font-size: 4rem;
  position: absolute;
  right: 10px; bottom: -20px;
  color: #ccc;
}

3.3. Botón con flecha dinámica

.btn-arrow {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #0069d9;
  color: #fff;
  text-decoration: none;
  position: relative;
  transition: background 0.3s;
}
.btn-arrow::after {
  content: "→";
  margin-left: 0.5rem;
  transition: transform 0.3s;
}
.btn-arrow:hover::after {
  transform: translateX(4px);
}

4. Buenas prácticas y rendimiento

• Usar display: inline-block o block: Los pseudo‑elementos heredan el display del elemento padre, pero a menudo es necesario definirlo explícitamente.
• Limitar el uso de imágenes pesadas en content: url(): Prefiere SVG en línea o fuentes de iconos para reducir peticiones y mejorar la velocidad.
• Evitar contenido crítico: No dependas de pseudo‑elementos para información esencial, pues los lectores de pantalla pueden ignorarlos.
• Cachear fuentes de iconos: Usa font-display: swap para evitar bloqueos de renderizado.
• Reutilizar clases: Define clases genéricas como .before-icon y .after-icon para mantener el CSS DRY.

5. Compatibilidad y degradación progresiva

Los pseudo‑elementos ::before y ::after están soportados en todos los navegadores modernos (Chrome, Edge, Firefox, Safari) desde versiones muy tempranas. En navegadores muy antiguos (IE8 y anteriores) se utilizan la sintaxis de un solo colon (:before), que sigue funcionando en la mayoría de los casos. Sin embargo, si necesitas soportar IE8, escribe ambos:

.legacy {
  :before, ::before { /* estilos */ }
  :after,  ::after  { /* estilos */ }
}

6. Accesibilidad y SEO

• Contenido decorativo: Si el pseudo‑elemento solo aporta estilo, no afecta al SEO.
• Información esencial: No coloques texto importante solo en pseudo‑elementos; los motores de búsqueda y lectores de pantalla pueden omitirlo.
• Aria‑hidden: Si necesitas ocultar un pseudo‑elemento a los AT, envuélvelo dentro de un elemento con aria-hidden="true" y utiliza pointer-events: none;.

7. Depuración y troubleshooting

Algunos errores comunes y cómo solucionarlos:

• Olvidar content: El pseudo‑elemento no aparece. Añade content: ""; incluso si solo necesitas un bloque.
• Problemas de z‑index: Los pseudo‑elementos están en el mismo stacking context que su elemento padre. Usa position: relative; y z-index adecuadamente.
• No heredan estilos de fuente: Define explícitamente font-family si usas fuentes de iconos.
• Falta de espacio: Añade margin o padding al pseudo‑elemento, no al elemento original.

8. Alternativas y combinaciones con JavaScript

En algunos casos, ::before y ::after no son suficientes (por ejemplo, contenido dinámico que depende de una API). Se pueden combinar con JavaScript mediante element.insertAdjacentHTML() o manipulando style.setProperty('--pseudo-content', '"texto"') y usando content: var(--pseudo-content) en CSS.

9. Conclusión

Los pseudo‑elementos ::before y ::after son herramientas esenciales para diseñadores y desarrolladores front‑end que buscan enriquecer la UI sin sobrecargar el HTML. Con una correcta aplicación, buenas prácticas de rendimiento y atención a la accesibilidad, podrás crear interfaces más limpias, mantenibles y rápidas.