Cuando empiezas a dibujar con CSS, lo habitual es construir formas simples: círculos, triángulos o pequeños iconos. Pero en cuanto quieres añadir más detalle o crear composiciones más ricas, aparece una limitación clara: el HTML empieza a crecer innecesariamente.
Si ya has trabajado cómo dibujar formas básicas con CSS, este es el siguiente paso natural.
Aquí es donde entran en juego los pseudo-elementos en CSS.
Gracias a ::before y ::after, puedes añadir capas visuales, detalles decorativos e incluso partes completas de una ilustración sin ensuciar el marcado. Esto no solo mejora la estética, sino también la mantenibilidad y la claridad del código.
Además, su uso tiene impacto directo en algo clave en UX: la relación entre tiempo de decisión y carga cognitiva. Porque no se trata solo de dibujar más, sino de dibujar mejor.
Qué son los pseudo-elementos en CSS y por qué importan tanto
Los pseudo-elementos permiten crear contenido visual adicional dentro de un elemento, sin añadir nodos al HTML.
Los más utilizados son:
::before::after
Ambos funcionan como capas extra que puedes posicionar, estilizar y animar.
La gran ventaja: más complejidad visual, menos HTML
Uno de los errores más comunes al dibujar con CSS es abusar del HTML.
Si vienes de crear estructuras más básicas como en formas con CSS, aquí notarás la diferencia enseguida.
Resultado:
- HTML más limpio
- CSS más potente
- Componentes más reutilizables
Cómo funcionan ::before y ::after en la práctica
content no es opcional
Sin content, el pseudo-elemento no existe:
.elemento::before {
content: '';
}
Aunque no muestres texto, necesitas declararlo.
Se comportan como hijos del elemento
Se renderizan dentro del elemento, como si fueran hijos:
::before→ antes del contenido::after→ después del contenido
Necesitan contexto de posicionamiento
Para trabajar bien con ellos:
.elemento {
position: relative;
}.elemento::before {
content: '';
position: absolute;
}
Esto te permite controlar su posición con precisión.
Por qué son clave para dibujar con CSS
Una sola etiqueta puede convertirse en una mini ilustración
Con pseudo-elementos puedes construir composiciones completas con una sola etiqueta.
Si ya has probado a dibujar iconos con CSS sin usar imágenes, aquí es donde empiezas a escalar el nivel.
Tres capas sin añadir HTML:
- base
::before::after
Te obligan a pensar por capas
Este cambio es clave.
Empiezas a diseñar como en ilustración:
- base
- volumen
- sombras
- detalles
- interacción
Esto mejora mucho tu forma de construir interfaces.
Tiempo de decisión vs. carga cognitiva: qué tiene que ver esto con los pseudo-elementos
Este punto conecta directamente con diseño UX.
Si te interesa profundizar más en esto, puedes leer también por qué diseñar primero lo esencial mejora la experiencia de usuario.
Cuando reducen el tiempo de decisión
Un pseudo-elemento bien usado puede:
- indicar interacción
- reforzar jerarquía
- guiar la mirada
Ejemplo:
.link::after {
content: '→';
margin-left: 4px;
}
👉 El usuario entiende más rápido qué hacer.
Cuando aumentan la carga cognitiva
Si abusas de ellos:
- demasiadas capas
- demasiados efectos
- demasiada decoración
El resultado es ruido visual.
💡 Clave: no todo lo que se puede hacer, se debe hacer.
Casos de uso reales en ilustración y diseño de interfaz
Decoración estructural sin ensuciar el HTML
Ejemplo: subrayado decorativo
.title::after {
content: '';
display: block;
height: 6px;
background: #f8e0ea;
}
Crear formas compuestas
Ejemplo: bocadillo de diálogo
.bubble::after {
content: '';
position: absolute;
bottom: -10px;
width: 20px;
height: 20px;
background: white;
transform: rotate(45deg);
}
Añadir capas interactivas
Ejemplo: hover animado
.button::before {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
transition: transform .3s;
}.button:hover::before {
transform: translateX(0);
}
Técnicas avanzadas para ilustraciones más complejas
Combinar pseudo-elementos con sombras múltiples
.dot {
box-shadow: 20px 0 0 black, 40px 0 0 black;
}
Permite duplicar formas sin más elementos.
Usar transformaciones para reutilizar piezas
.elemento::before {
transform: rotate(45deg);
}
Reutilizar una misma forma ahorra trabajo y mejora consistencia
Esto mejora:
- coherencia visual
- mantenimiento
- escalabilidad
Mezclar pseudo-elementos con gradientes
.shape {
background: radial-gradient(circle, white, blue);
}
Usar clip-path y pseudo-elementos juntos
Si quieres profundizar en este tipo de técnicas, un buen siguiente paso sería explorar clip-path en CSS (ideal para formas más avanzadas).
.elemento {
clip-path: polygon(...);
}
Ejemplo práctico: construir una ilustración sencilla con una sola etiqueta
<div class="flower"></div>
.flower {
position: relative;
width: 80px;
height: 80px;
background: pink;
border-radius: 50%;
}.flower::before {
content: '';
position: absolute;
box-shadow: 40px 0 pink, -40px 0 pink;
}.flower::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
background: yellow;
border-radius: 50%;
}
Una sola etiqueta → múltiples formas.
Buenas prácticas al usar pseudo-elementos en proyectos reales
- No metas contenido importante en
content - Úsalos para decoración o refuerzo visual
- Mantén el HTML limpio
- Documenta estructuras complejas
CSS no tiene que demostrar nada
No siempre CSS es la mejor solución.
Si algo es demasiado complejo: usa SVG.
Errores frecuentes al dibujar con CSS usando pseudo-elementos
- Olvidar
position: relative - Abusar de
z-index - Sobrecargar visualmente
- Crear CSS difícil de mantener
Cuándo usar pseudo-elementos y cuándo no
Úsalos cuando:
- quieras añadir decoración
- necesites capas extra
- quieras evitar más HTML
Evítalos cuando:
- el contenido sea importante
- la complejidad sea alta
- SVG sea más claro
Preguntas frecuentes sobre pseudo-elementos en CSS
¿Se pueden hacer ilustraciones completas con CSS?
Sí, pero no siempre es lo más práctico.
¿Pseudo-elementos vs pseudo-clases?
- pseudo-clases → estados
- pseudo-elementos → partes
¿Afectan a la accesibilidad?
Sí, si metes contenido importante en ellos.
Dibujar mejor con CSS no consiste en añadir más, sino en decidir mejor
Los pseudo-elementos en CSS te permiten crear más con menos. Añadir capas, enriquecer interfaces y mejorar la claridad visual sin complicar el HTML.
Pero también exigen algo clave: criterio.
No se trata de añadir más capas, sino de reducir la fricción visual.
Si ya has practicado con formas básicas e iconos, los pseudo-elementos en CSS son el siguiente paso para construir ilustraciones más ricas sin complicar innecesariamente el HTML. Y cuando empieces a usarlos con criterio, verás que no solo mejoras tus dibujos con CSS: también mejoras tu forma de pensar componentes.