Si quieres añadir contenido después de un elemento con CSS sin modificar el HTML de tu página, el pseudoelemento ::after es una de las herramientas más prácticas que puedes utilizar.
Gracias a esta función puedes incorporar texto, iconos, símbolos, elementos decorativos o pequeños indicadores inmediatamente después del contenido original de prácticamente cualquier elemento HTML.
Esta técnica resulta especialmente útil cuando trabajas con WordPress, menús, botones, enlaces, formularios o diseños personalizados y no quieres modificar continuamente la estructura del documento.
✨ En este tutorial vas a aprender cómo funciona ::after, cómo utilizar la propiedad content y qué posibilidades tienes para personalizar completamente el contenido añadido.
¿Qué es el pseudoelemento ::after en CSS?
El pseudoelemento ::after permite crear un elemento virtual después del contenido de un elemento HTML seleccionado mediante CSS.
En realidad, el navegador no introduce una nueva etiqueta dentro de tu código HTML, sino que representa visualmente ese contenido como si estuviera colocado al final del elemento.
Puedes encontrar información técnica adicional sobre este pseudoelemento en la documentación de ::after de MDN, donde se explican también sus particularidades y compatibilidad.
Por ejemplo, imagina que tienes este enlace dentro de tu página:
<a class="enlace" href="#">Visitar página</a>
Puedes añadir una flecha después del texto utilizando únicamente el siguiente CSS:
.enlace::after {
content: " →";
}
El resultado visible sería “Visitar página →”, aunque la flecha no aparezca realmente escrita dentro del código HTML.
Cómo añadir contenido después de un elemento con CSS
El procedimiento para insertar contenido después de un elemento mediante CSS es bastante sencillo y normalmente requiere solamente unas pocas líneas.
🛠️ Sigue estos pasos:
- Identifica el elemento al que quieres añadir contenido mediante su clase, identificador o selector CSS.
- Añade el pseudoelemento
::afterinmediatamente después del selector que hayas elegido. - Utiliza la propiedad
contentpara determinar qué contenido quieres mostrar. - Añade propiedades CSS adicionales si quieres modificar su tamaño, posición, color, separación o apariencia.
Por ejemplo, puedes utilizar este código:
.mi-elemento::after {
content: "Contenido añadido";
}
En este caso, el navegador mostrará “Contenido añadido” justo después del contenido original del elemento que tenga la clase .mi-elemento.
Cómo funciona la propiedad content
La propiedad content es prácticamente imprescindible cuando trabajas con los pseudoelementos ::before y ::after.
Esta propiedad indica al navegador qué debe aparecer dentro del pseudoelemento generado mediante CSS.
Puedes consultar todas sus posibilidades en la documentación de la propiedad content de MDN.
El ejemplo más sencillo consiste en introducir directamente un fragmento de texto:
.elemento::after {
content: " Nuevo";
}
También puedes utilizar símbolos especiales:
.elemento::after {
content: " ✓";
}
✅ Esta técnica resulta particularmente cómoda para añadir pequeños indicadores visuales sin introducir imágenes adicionales.
Añadir un icono después de un elemento con CSS
Uno de los usos más habituales de ::after consiste en incorporar iconos después de enlaces, botones o títulos.
Por ejemplo, puedes señalar que determinado enlace lleva hacia una página externa:
.enlace-externo::after {
content: " ↗";
margin-left: 5px;
}
La propiedad margin-left permite crear una pequeña separación entre el contenido original y el icono, evitando que ambos elementos aparezcan excesivamente juntos.
💡 Puedes utilizar caracteres Unicode como →, ✓, ★, ♥, ➜, ↗, ↓ o + sin necesidad de cargar ninguna biblioteca externa.
Cambiar el color del contenido añadido
El contenido generado mediante ::after puede recibir prácticamente las mismas propiedades visuales que cualquier otro elemento CSS.
Si quieres que el contenido adicional tenga otro color, puedes hacerlo de esta forma:
.elemento::after {
content: " Nuevo";
color: red;
}
De esta manera, solamente el contenido generado por el pseudoelemento aparecerá con el color especificado.
También puedes utilizar colores en hexadecimal, RGB, HSL o cualquier otro formato admitido actualmente por CSS.
Cambiar el tamaño del contenido generado
También puedes utilizar font-size para modificar independientemente el tamaño del contenido añadido mediante ::after.
Por ejemplo:
.elemento::after {
content: " NUEVO";
font-size: 12px;
}
Esto puede resultar especialmente interesante para crear etiquetas pequeñas al lado de determinados textos o enlaces.
🏷️ Incluso puedes combinar varias propiedades y convertir ese texto en una auténtica etiqueta visual:
.elemento::after {
content: "NUEVO";
font-size: 11px;
margin-left: 8px;
padding: 3px 6px;
border-radius: 3px;
background: #222;
color: #fff;
}
Añadir contenido después de un enlace
Los enlaces son probablemente uno de los elementos donde ::after tiene más aplicaciones prácticas.
Por ejemplo, puedes añadir automáticamente una flecha después de determinados enlaces:
a.enlace-flecha::after {
content: " →";
}
Esto te permite mantener un diseño consistente en toda la web sin tener que introducir manualmente el símbolo en cada enlace.
Si posteriormente decides cambiar la flecha por otro icono, solamente tendrás que modificar una línea dentro de tu hoja de estilos.
Añadir contenido al pasar el ratón
También puedes combinar ::after con la pseudoclase :hover para conseguir efectos interactivos cuando el usuario pasa el cursor sobre un elemento.
Un ejemplo muy sencillo sería:
.enlace:hover::after {
content: " →";
}
En este caso, la flecha solamente aparecerá mientras el usuario tenga el puntero situado encima del enlace.
Puedes encontrar más posibilidades relacionadas con este selector en la documentación de :hover de MDN.
🖱️ Esta combinación puede ayudarte a crear microinteracciones sencillas sin utilizar JavaScript.
Añadir contenido vacío con ::after
No siempre tienes que introducir texto dentro de la propiedad content, ya que también puedes crear un pseudoelemento vacío para utilizarlo como elemento decorativo.
Para hacerlo solamente necesitas escribir:
.elemento::after {
content: "";
}
Aunque aparentemente no ocurra nada, ahora puedes asignarle dimensiones, fondo, bordes y posición para convertirlo en una figura independiente.
Por ejemplo:
.elemento::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-left: 8px;
background: green;
border-radius: 50%;
}
🟢 Este código genera un pequeño círculo después del contenido original, algo que puedes aprovechar para crear indicadores de estado.
Crear una línea decorativa después de un título
Otra aplicación interesante consiste en crear líneas decorativas debajo o después de los encabezados sin introducir etiquetas adicionales en el HTML.
Puedes utilizar este código:
.titulo::after {
content: "";
display: block;
width: 50px;
height: 3px;
margin-top: 8px;
background: #333;
}
En este caso display: block hace que el pseudoelemento ocupe su propia línea en lugar de aparecer inmediatamente junto al texto.
🎨 Cambiando la anchura, altura y fondo puedes construir subrayados personalizados y otros recursos decorativos.
Diferencias entre ::after y ::before
CSS dispone también del pseudoelemento ::before, cuyo funcionamiento es prácticamente idéntico pero introduce el contenido antes del contenido original del elemento.
Por ejemplo:
.elemento::before {
content: "✓ ";
}
.elemento::after {
content: " →";
}
El primero mostraría el símbolo antes del texto, mientras que el segundo colocaría la flecha después del texto.
La elección entre ambos depende simplemente de la posición donde quieras mostrar el contenido generado.
Tabla resumen sobre ::after en CSS
| Objetivo | Propiedad o técnica | Ejemplo |
|---|---|---|
| Añadir texto | content | content: "Nuevo"; |
| Añadir un símbolo | content | content: " →"; |
| Crear separación | margin | margin-left: 5px; |
| Cambiar el color | color | color: red; |
| Cambiar el tamaño | font-size | font-size: 12px; |
| Crear una figura | content: "" | content: ""; |
| Cambiar dimensiones | width y height | width: 10px; |
| Cambiar la posición | position | position: absolute; |
| Mostrar como bloque | display | display: block; |
| Crear interacción | :hover::after | .boton:hover::after |
Cómo posicionar ::after de forma absoluta
Cuando quieres conseguir diseños más elaborados puedes combinar el pseudoelemento con position: absolute.
Por ejemplo:
.elemento {
position: relative;
}
.elemento::after {
content: "";
position: absolute;
right: -10px;
top: 0;
width: 8px;
height: 8px;
background: red;
}
La propiedad position: relative aplicada al elemento principal permite que el pseudoelemento absoluto tome dicho elemento como referencia para posicionarse.
Esta técnica es especialmente útil para crear insignias, puntos, líneas, notificaciones y pequeños adornos gráficos.
¿Se pueden insertar imágenes con ::after?
También es posible utilizar content para mostrar determinados recursos gráficos, aunque en muchos diseños suele resultar más flexible utilizar una imagen de fondo.
Puedes encontrar información sobre las diferentes formas de trabajar con imágenes y fondos en la documentación CSS de W3C.
Para una imagen decorativa suele ser más práctico utilizar algo similar a esto:
.elemento::after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-left: 5px;
background-image: url("icono.svg");
background-size: contain;
background-repeat: no-repeat;
}
Este sistema te permite controlar con mucha precisión las dimensiones y apariencia del icono.
Errores habituales al utilizar ::after
⚠️ Uno de los errores más frecuentes consiste en olvidar la propiedad content, porque normalmente el pseudoelemento no será visible aunque hayas definido otras propiedades.
También es habitual intentar modificar width y height sin cambiar el comportamiento de visualización del pseudoelemento, por lo que puede ser necesario utilizar display: inline-block o display: block.
Otro problema frecuente aparece cuando utilizas posicionamiento absoluto sin establecer un contexto adecuado, algo que normalmente puedes solucionar añadiendo position: relative al elemento padre.
Finalmente, evita utilizar estos pseudoelementos para introducir información esencial para comprender la página, ya que el contenido generado mediante CSS debería utilizarse principalmente como apoyo visual o decorativo.
Cuándo utilizar ::after en tu web
El pseudoelemento ::after es una solución excelente cuando necesitas añadir pequeñas piezas visuales sin ensuciar el código HTML.
Puedes utilizarlo para crear flechas en enlaces, iconos, etiquetas, líneas decorativas, indicadores, círculos, efectos hover y multitud de pequeños detalles de interfaz.
🚀 Además, al centralizar estos elementos dentro de tu hoja de estilos, podrás modificar cientos de elementos simultáneamente cambiando únicamente unas pocas líneas de CSS.
Si trabajas habitualmente con WordPress o desarrollas tus propias páginas, aprender a dominar ::after, ::before y la propiedad content te permitirá resolver numerosos detalles de diseño de una manera mucho más elegante.
