Pseudoelemento ::after de CSS
Usa el pseudoelemento ::after de CSS para añadir contenido al final de un elemento. Lee sobre él y prueba ejemplos.
El pseudoelemento ::after de CSS crea un elemento adicional que se inserta como el último hijo del elemento seleccionado, justo después de su contenido real. No necesitas añadir ningún marcado en tu HTML — el navegador genera el elemento a partir de tu hoja de estilos. Esta página explica qué es ::after, cómo funciona la propiedad obligatoria content, los errores comunes a tener en cuenta y los patrones donde resulta verdaderamente útil.
Qué es ::after
::after te permite adjuntar contenido generado — caracteres, cadenas de texto, una imagen o una forma decorativa — al final de un elemento sin tocar el HTML del documento. Como el bloque generado forma parte del elemento, puedes animarlo, posicionarlo o aplicarle float como a cualquier contenido normal.
Hay dos reglas esenciales:
- La propiedad
contentes obligatoria. Si omitescontent, el pseudoelemento nunca se crea. Usacontent: ""(una cadena vacía) cuando solo quieras un bloque decorativo sin texto. - Por defecto el bloque es inline. Establece
display: block(oinline-block) si necesitas que el ancho, la altura o los márgenes verticales surtan efecto.
::after vs :after
::after también puede escribirse con la notación de dos puntos simples :after. La forma con doble dos puntos es el estándar moderno de CSS3 para los pseudoelementos (para distinguirlos de las pseudoclases como :hover); la forma de dos puntos simples existe solo por compatibilidad con navegadores antiguos. Prefiere ::after a menos que debas dar soporte a motores obsoletos como Internet Explorer 8.
::after vs ::before
El pseudoelemento ::before inserta contenido generado antes del contenido del elemento, mientras que ::after lo inserta después. Son por lo demás idénticos y se usan frecuentemente juntos — por ejemplo, ::before y ::after son la forma clásica de añadir comillas de apertura y cierre o corchetes decorativos pareados alrededor de un encabezado.
El contenido generado no forma parte del DOM: el usuario no puede seleccionarlo, y la mayoría de los lectores de pantalla lo ignoran (el soporte varía entre navegadores). Usa ::after únicamente para contenido puramente decorativo o complementario — nunca pongas en content información que el usuario deba leer.
Versión
Sintaxis
Pseudoelemento CSS ::after
::after {
css declarations;
}Ejemplo del pseudoelemento ::after:
Ejemplo de CSS ::after
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::after {
content: " - William Shakespeare.";
}
</style>
</head>
<body>
<h2>::after selector example</h2>
<p>"Be or not to be"</p>
</body>
</html>En el siguiente ejemplo, se pueden añadir estilos al contenido.
Ejemplo del pseudoelemento ::after con contenido estilizado:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::after {
content: " - William Shakespeare.";
background-color: #eee;
color: #1c87c9;
padding: 5px 3px;
border: 2px dashed #000;
margin-left: 5px;
}
</style>
</head>
<body>
<h2>::after selector example</h2>
<p>"Be or not to be"</p>
</body>
</html>Casos de uso habituales
::after resulta muy útil cuando quieres contenido visual extra sin ensuciar tu marcado:
- Formas decorativas y divisores. Un bloque construido con
content: ""más unborderobackground— subrayados, flechas, cintas, colas de tooltip. - Iconos tras los enlaces. Añade una flecha de enlace externo o un indicador de tipo de archivo después de un
<a>. - El truco clearfix. Fuerza a un padre a contener sus hijos con float.
/* External-link arrow after every link with target="_blank" */
a[target="_blank"]::after {
content: " ↗";
}
/* Clearfix: make a container wrap its floated children */
.clearfix::after {
content: "";
display: block; /* block + clear pushes the box below the floats */
clear: both;
}Observa el content: "" vacío en el clearfix: crea el bloque sin ningún texto visible, que es exactamente lo que necesitas para un ayudante solo de maquetación.
Consejos y errores comunes
- Sin
content, no hay elemento. Olvidar la propiedadcontentes la razón más habitual por la que una regla::after"no hace nada". - Establece
displaypara dimensionar. Un pseudoelemento inline ignorawidth,heighty los márgenes superior/inferior. Usadisplay: blockoinline-block. - Higiene de comillas en
content. Dentro de las cadenas decontent, escapa los caracteres especiales con su código Unicode (p. ej.,content: "\00BB"para») para que la codificación del archivo no los rompa.