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.
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.