Un pseudo-elemento (dos puntos ::) estiliza una parte específica de un elemento o genera contenido que no está en el HTML — sin añadir markup adicional.
::before y ::after — contenido generado
css
{
: ;
}
{
: ;
}
Un pseudo-elemento (dos puntos ::) estiliza una parte específica de un elemento o genera contenido que no está en el HTML — sin añadir markup adicional.
{
: ;
}
{
: ;
}
La propiedad content es obligatoria — sin ella, el pseudo-elemento no se renderiza. El contenido generado es un hijo al principio (::before) o al final (::after) del elemento.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Este es el uso clásico: dibujar flechas, insignias, superposiciones, líneas decorativas — manteniendo el HTML limpio de elementos puramente visuales.
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3 introdujo :: para distinguir pseudo-elementos de pseudo-clases (los navegadores siguen aceptando dos puntos en los antiguos por compatibilidad, pero usa ::)
El contenido generado es leído por algunos lectores de pantalla — no pongas información esencial solo en ::before/::after (úsalo para decoración), y los iconos decorativos es mejor dejarlos fuera del árbol de accesibilidad.
Los pseudo-elementos te permiten añadir iconos, formas decorativas (flechas, divisores), letras capitales y contadores puramente en CSS — sin <div>s o <span>s adicionales.
Mantienen el markup semántico mientras habilitan detalle visual rico, y son una piedra angular del styling limpio y mantenible.