::before y ::after I: decoraciones, iconos y contadores

Todo elemento HTML esconde dos hijos fantasma: uno antes de su contenido y otro después. No existen en el HTML — los invocas desde CSS con ::before y ::after, y con ellos agregas decoración SIN ensuciar el documento. Hoy: sus reglas de invocación, los patrones decorativos y los contadores CSS.

Las reglas de invocación

Tres reglas y las sabes todas: (1) content es obligatorio, aunque sea ""; (2) el fantasma es un hijo más — dale display, tamaño, position, transform, lo que quieras; (3) se lleva de maravilla con el dúo del módulo 7: padre position: relative, fantasma absolute.

Los patrones decorativos

<h2 class="titulo-subrayado">Subrayado con carácter</h2>
<blockquote class="cita">El buen CSS decora sin ensuciar el HTML.</blockquote>
<a class="enlace-flecha" href="#">Seguir leyendo</a>

body { font-family: system-ui; padding: 24px; color: #1e293b; }
.titulo-subrayado { font-size: 24px; margin: 0 0 20px; }
.titulo-subrayado::after { content: ""; display: block; width: 56px; height: 4px; background: linear-gradient(90deg, #6d28d9, #2563eb); border-radius: 2px; margin-top: 8px; }
.cita { position: relative; font-size: 17px; color: #475569; margin: 0 0 20px; padding: 12px 16px 12px 40px; background: #f8fafc; border-radius: 10px; }
.cita::before { content: "\201C"; position: absolute; left: 10px; top: -2px; font-size: 48px; color: #a78bfa; font-family: Georgia, serif; line-height: 1; }
.enlace-flecha { color: #6d28d9; font-weight: 600; text-decoration: none; }
.enlace-flecha::after { content: " \2192"; display: inline-block; transition: transform 0.2s ease-out; }
.enlace-flecha:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .enlace-flecha::after { transition: none; } }

Tres clásicos en un ejemplo: el subrayado-firma (::after como bloque), la comilla gigante (::before absolute — nota el content: "\201C", los caracteres van por código escapado o literal), y la flecha que se desliza al hover (pseudo-elemento + transición: tu primer micro-interacción, el módulo 10 hará fiesta con esto).

Una advertencia de criterio: el content con TEXTO real ("Nuevo", "→ ver más") es zona gris — los lectores de pantalla modernos SÍ lo leen, pero no todos, y no se puede seleccionar ni traducir. Regla: decoración pura en pseudo-elementos; contenido con significado, al HTML.

Contadores CSS: numeración automática

Los ol numeran solo listas. ¿Y numerar secciones, figuras, pasos — con estilo propio? Contadores:

Reordena los pasos en el HTML y la numeración se corrige sola — ese es el punto. Existe también counters() (anidado: 1.2.3) y desde 2023 los contadores se pueden estilizar en ::marker — de eso, en dos lecciones.

Mini-reto

En tu periódico: subrayado-firma en los h2 de sección, numeración con counter() en "Lo más leído" (quítale el ol y pon ul — ahora numera el CSS), y la flecha deslizante en los enlaces "ver más". HTML intacto, portada con carácter.

Qué sigue

Decoraste con los fantasmas. La próxima lección los lleva al extremo: ARTE con CSS — triángulos, cintas, speech bubbles y las formas que convierten dos pseudo-elementos en un taller de dibujo.