CSS
Uso de pseudo-elementos para estilizar partes de un elemento o generar contenido decorativo con ::before, ::after, ::marker, ::selection y otros.
Un pseudo-elemento permite estilizar una parte del elemento o una caja generada que no aparece como nodo HTML independiente.
.card::before { ... }.badge::before {
content: "";
inline-size: 0.5rem;
block-size: 0.5rem;
border-radius: 50%;
background: currentColor;
}Necesitan content para generar una caja, incluso cuando es una cadena vacía.
No coloques información esencial solo en content: puede no copiarse, traducirse o anunciarse de forma consistente.
.article::first-letter {
font-size: 3em;
}
.article::first-line {
font-weight: 600;
}::first-line depende del layout final: cambia con ancho, fuente y contenido.
::selection {
background: oklch(75% 0.12 280);
color: black;
}Mantén contraste suficiente. Solo ciertas propiedades aplican.
li::marker {
color: var(--accent);
font-weight: 700;
}Permite estilizar el marcador real sin inventarlo con before.
input::placeholder {
color: color-mix(in srgb, currentColor 55%, transparent);
}Placeholder no reemplaza label y debe conservar contraste suficiente.
input[type="file"]::file-selector-button {
font: inherit;
}Estiliza la parte botón del input file sin reconstruir todo el control.
dialog::backdrop {
background: rgb(0 0 0 / 0.55);
}Aplica al backdrop de elementos en top layer como dialogs modales.
La plataforma incluye familias como:
::highlight()::target-text::view-transition-*Son capacidades especializadas; revisa soporte y contrato antes de usarlas.
.button:hover::after { ... }La pseudo-clase describe estado del elemento y el pseudo-elemento identifica la parte generada.
.card {
position: relative;
}
.card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}Una decoración absoluta puede cubrir contenido o capturar eventos si no se controla.
¿Por qué no conviene escribir “Obligatorio” únicamente con label::after { content: ... }?
Porque esa información puede no exponerse, copiarse o traducirse de forma fiable; el estado debe existir en contenido o semántica real.
Especificidad calcula el desempate entre selectores dentro del mismo nivel de cascada.