Los pseudoelementos ::before y ::after son dos de las herramientas más versátiles de CSS para añadir detalles visuales a una página web sin introducir nuevos elementos en el código HTML.
Si aprendes a utilizarlos correctamente, podrás crear líneas, iconos, formas, fondos, etiquetas y pequeños adornos directamente desde tu hoja de estilos.
Además de mantener un HTML mucho más limpio, esta técnica te permite modificar rápidamente el aspecto de tu diseño sin tener que editar continuamente la estructura de cada página.
En este tutorial vas a aprender cómo crear elementos decorativos con ::before y ::after, cómo posicionarlos y qué posibilidades ofrecen para mejorar visualmente tu web. 🎨
Qué son ::before y ::after en CSS
::before y ::after son pseudoelementos de CSS que permiten generar contenido asociado a un elemento HTML sin escribir ese contenido directamente dentro del documento.
Como su propio nombre indica, ::before coloca el pseudoelemento antes del contenido del elemento seleccionado, mientras que ::after lo sitúa después.
Puedes encontrar una explicación técnica más detallada sobre los pseudoelementos CSS en MDN.
Por ejemplo, imagina que tienes este encabezado:
<h2 class="titulo">Servicios</h2>
Puedes añadir una pequeña línea debajo utilizando únicamente CSS:
.titulo::after {
content: "";
display: block;
width: 50px;
height: 3px;
background: #222;
margin-top: 8px;
}
El resultado será un título acompañado de una línea decorativa sin necesidad de introducir un <span> o cualquier otro elemento adicional.
Para qué sirven ::before y ::after
Las posibilidades que ofrecen estos pseudoelementos son enormes, especialmente cuando quieres introducir detalles puramente decorativos que no deberían formar parte del contenido HTML.
Puedes utilizarlos para crear separadores, flechas, círculos, iconos, bordes especiales, fondos, etiquetas o efectos al pasar el ratón.
También resultan especialmente útiles cuando trabajas con WordPress, ya que puedes modificar determinados elementos visuales simplemente identificando sus clases mediante las herramientas de desarrollador del navegador.
Chrome, Firefox y otros navegadores modernos incluyen herramientas que permiten inspeccionar elementos HTML y descubrir fácilmente qué selector debes utilizar.
Cómo usar ::before y ::after paso a paso
Para utilizar correctamente estos pseudoelementos debes tener en cuenta algunas propiedades fundamentales.
- 🎯 Selecciona el elemento sobre el que quieres añadir la decoración mediante su clase, identificador o selector CSS.
- ✏️ Añade ::before o ::after inmediatamente después del selector.
- 📦 Incluye siempre la propiedad content, incluso cuando no quieras mostrar ningún texto.
- 📐 Define el ancho y alto cuando quieras crear una forma concreta.
- 🎨 Utiliza propiedades como background, border o border-radius para modificar su apariencia.
- 📍 Usa position: absolute cuando necesites controlar con precisión la ubicación del elemento decorativo.
Un ejemplo básico sería el siguiente:
.elemento::before {
content: "";
width: 10px;
height: 10px;
background: black;
display: inline-block;
}
Con estas pocas líneas ya habrás creado un pequeño cuadrado negro antes del contenido del elemento seleccionado.
La importancia de la propiedad content
Uno de los errores más habituales cuando comienzas a trabajar con ::before y ::after es olvidar la propiedad content.
Aunque únicamente quieras crear una línea, un círculo o cualquier otro elemento gráfico, generalmente necesitarás declarar content: «» para que el pseudoelemento pueda generarse.
.elemento::after {
content: "";
}
También puedes introducir directamente caracteres o símbolos dentro de esta propiedad.
.enlace::after {
content: " →";
}
Este ejemplo añadirá automáticamente una flecha después de cada elemento que tenga asignada la clase .enlace.
Cómo crear una línea decorativa debajo de un título
Una de las aplicaciones más frecuentes de ::after consiste en añadir una línea decorativa debajo de los encabezados.
Puedes conseguirlo con este código:
.titulo::after {
content: "";
display: block;
width: 60px;
height: 4px;
background: #333;
margin-top: 10px;
}
Puedes modificar fácilmente width, height y background para adaptar la línea al diseño de tu página web.
Si quieres centrarla debajo del encabezado, puedes utilizar:
.titulo::after {
content: "";
display: block;
width: 60px;
height: 4px;
background: #333;
margin: 10px auto 0;
}
De esta forma conseguirás una decoración sencilla y reutilizable para diferentes títulos de tu web.
Cómo crear un círculo decorativo con ::before
Otra opción interesante consiste en generar pequeños círculos que acompañen determinados textos.
Puedes hacerlo con este código:
.destacado::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background: #222;
border-radius: 50%;
margin-right: 8px;
}
La clave está en utilizar border-radius: 50%, ya que transforma el cuadrado original en un círculo perfecto.
Esta técnica puede utilizarse para crear viñetas personalizadas, indicadores visuales o pequeños elementos que ayuden a organizar el contenido.
Cómo crear formas utilizando bordes
Los pseudoelementos también permiten crear formas bastante elaboradas utilizando únicamente las propiedades de border de CSS.
Una de las más populares es la flecha triangular:
.flecha::after {
content: "";
display: inline-block;
margin-left: 8px;
border-left: 6px solid #222;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
En este caso no necesitas imágenes ni iconos externos, ya que la propia combinación de bordes genera el triángulo.
Esta solución resulta especialmente útil para botones, menús desplegables o enlaces que conducen hacia otra sección.
Cómo posicionar ::before y ::after libremente
Cuando quieras crear decoraciones más complejas necesitarás trabajar con las propiedades position: relative y position: absolute.
Normalmente deberás aplicar position: relative al elemento principal:
.caja {
position: relative;
}
Después puedes posicionar el pseudoelemento respecto a esa caja:
.caja::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #333;
top: -10px;
left: -10px;
}
Gracias a esta combinación podrás colocar elementos decorativos prácticamente en cualquier punto alrededor de una caja, imagen, título o botón.
Si todavía no dominas este sistema, puedes consultar cómo funciona la propiedad position en CSS.
Crear un efecto decorativo al pasar el ratón
También puedes combinar los pseudoelementos con :hover para conseguir efectos interactivos.
Por ejemplo, puedes crear una línea que aparezca progresivamente debajo de un enlace:
.enlace {
position: relative;
text-decoration: none;
}
.enlace::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 0;
height: 2px;
background: currentColor;
transition: width 0.3s ease;
}
.enlace:hover::after {
width: 100%;
}
Este pequeño fragmento crea un efecto de subrayado animado muy habitual en menús modernos.
La propiedad transition permite que el cambio no sea instantáneo y produzca una animación mucho más suave.
Utilizar currentColor para crear decoraciones adaptables
Una propiedad especialmente práctica al trabajar con pseudoelementos es currentColor.
Este valor permite utilizar automáticamente el color de texto que tenga aplicado el elemento principal.
.titulo::after {
content: "";
display: block;
width: 50px;
height: 3px;
background: currentColor;
}
Si posteriormente cambias el color del título, la decoración cambiará automáticamente sin necesidad de modificar otra regla CSS.
Esta técnica ayuda a construir estilos más reutilizables y reduce considerablemente el mantenimiento de tus hojas de estilos. 🛠️
Diferencias entre ::before y ::after
Aunque ambos pseudoelementos funcionan prácticamente de la misma manera, la diferencia principal es el lugar donde se generan respecto al contenido.
| Pseudoelemento | Ubicación | Usos habituales |
|---|---|---|
::before | Antes del contenido | Iconos, círculos, comillas, indicadores y adornos iniciales |
::after | Después del contenido | Flechas, líneas, subrayados y adornos finales |
content | Genera el contenido | Texto, símbolos o pseudoelementos vacíos |
position | Controla la posición | Decoraciones superpuestas o desplazadas |
currentColor | Hereda el color | Elementos decorativos adaptables |
border-radius | Redondea la forma | Círculos y elementos redondeados |
En realidad, puedes utilizar cualquiera de los dos para muchas de estas funciones siempre que la posición final del pseudoelemento sea la adecuada.
Errores frecuentes al utilizar ::before y ::after
Aunque su funcionamiento es bastante sencillo, existen algunos problemas recurrentes que pueden hacer que el pseudoelemento no aparezca como esperabas.
- ⚠️ Comprueba que has incluido la propiedad content.
- ⚠️ Utiliza display: block o inline-block cuando necesites controlar las dimensiones.
- ⚠️ Añade position: relative al elemento padre cuando posiciones el pseudoelemento de forma absoluta.
- ⚠️ Revisa que otro elemento no esté ocultándolo mediante z-index.
- ⚠️ Comprueba que el selector CSS utilizado realmente coincide con el elemento que quieres modificar.
- ⚠️ Evita utilizar estos pseudoelementos para contenido realmente importante, ya que su función principal debería ser visual o decorativa.
Cuándo merece la pena utilizar estos pseudoelementos
Siempre que quieras introducir una modificación puramente estética, deberías plantearte utilizar ::before o ::after antes de añadir nuevos elementos al HTML.
Con ellos puedes mantener una estructura más ordenada y separar mejor el contenido de la presentación visual.
Esto resulta especialmente útil en proyectos grandes, donde llenar el HTML de etiquetas creadas exclusivamente para decoración puede terminar complicando innecesariamente el mantenimiento.
Además, al combinar estos pseudoelementos con variables CSS, animaciones, transformaciones y media queries, las posibilidades creativas aumentan considerablemente. 🚀
Conclusión
Dominar ::before y ::after en CSS te permitirá crear diseños mucho más cuidados utilizando sorprendentemente poco código.
Puedes empezar creando líneas y círculos sencillos y, conforme ganes experiencia, utilizarlos para construir animaciones, iconos, formas geométricas y efectos interactivos.
La gran ventaja es que podrás incorporar todos estos recursos sin ensuciar tu HTML con elementos innecesarios, haciendo que tu código resulte más limpio y fácil de mantener.
Experimenta con propiedades como position, transform, border, background, transition y border-radius, porque combinadas con ::before y ::after pueden resolver una enorme cantidad de necesidades visuales.
