Usa ::before y ::after para crear decoraciones, overlays y UI sin HTML extra.
::before y ::after generan cajas decorativas sin añadir HTML.
Siempre requieren content para aparecer.
Son ideales para badges, líneas, overlays y efectos de hover.
attr() permite leer datos del HTML y mostrarlos en UI.
Sin content, el pseudoelemento no existe.
::before y ::after se comportan como elementos inline por defecto.
Define content: "" para crear una caja vacía y poder estilizarla.
Puedes cambiar su display a block o inline-block según el caso.
Con position absoluta controlas overlays y decoraciones.
Asigna position: relative al contenedor para anclar el pseudoelemento.
Usa inset para cubrir todo el elemento y crear overlays.
pointer-events: none evita que el pseudoelemento bloquee clics.
Ideal para etiquetas, estados y tooltips ligeros.
attr() permite leer atributos data-* y mostrarlos en UI.
Es perfecto para badges dinámicos o tooltips simples.
Mantén el texto breve para evitar que se desborde.
Crea subrayados, brillos y separadores sin más HTML.
Los pseudoelementos son perfectos para subrayados animados y líneas guía.
Usa transform y transition para efectos suaves.
Combina gradients con opacity para un look moderno.
Úsalos como decoración, no como contenido esencial.
El contenido importante debe estar en el HTML para accesibilidad y SEO.
Los pseudoelementos son invisibles para lectores de pantalla.
Mantén un contraste adecuado si el pseudoelemento añade color.
Usa ::before y ::after para crear decoraciones, overlays y UI sin HTML extra.
Código del tema: display: grid; gap: 1rem;
Sin content, el pseudoelemento no existe.
::before y ::after se comportan como elementos inline por defecto.
Define content: "" para crear una caja vacía y poder estilizarla.
Puedes cambiar su display a block o inline-block según el caso.
.highlight::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 8px;
background: #0ea5e9;
border-radius: 999px;
}
Con position absoluta controlas overlays y decoraciones.
Asigna position: relative al contenedor para anclar el pseudoelemento.
Usa inset para cubrir todo el elemento y crear overlays.
pointer-events: none evita que el pseudoelemento bloquee clics.
.card { position: relative; overflow: hidden; }
.card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(14, 165, 233, 0.18), transparent 60%);
pointer-events: none;
}
Ideal para etiquetas, estados y tooltips ligeros.
attr() permite leer atributos data-* y mostrarlos en UI.
Es perfecto para badges dinámicos o tooltips simples.
Mantén el texto breve para evitar que se desborde.
.price::after {
content: attr(data-label);
margin-left: 8px;
padding: 2px 6px;
border-radius: 999px;
font-size: 11px;
background: #e2e8f0;
}
Crea subrayados, brillos y separadores sin más HTML.
Los pseudoelementos son perfectos para subrayados animados y líneas guía.
Usa transform y transition para efectos suaves.
Combina gradients con opacity para un look moderno.
.link { position: relative; color: #0f172a; text-decoration: none; }
.link::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: #0ea5e9;
transform: scaleX(0);
transform-origin: left;
transition: transform 180ms ease;
}
.link:hover::after {
transform: scaleX(1);
}
Úsalos como decoración, no como contenido esencial.
El contenido importante debe estar en el HTML para accesibilidad y SEO.
Los pseudoelementos son invisibles para lectores de pantalla.
Mantén un contraste adecuado si el pseudoelemento añade color.