Pseudo-clases, pseudo-elementos y transiciones
Estados interactivos y animaciones suaves.
Las pseudo-clases seleccionan un elemento según su estado: :hover (cursor encima), :focus (campo enfocado), :first-child / :last-child (posición). Los pseudo-elementos crean contenido adicional: ::before y ::after insertan contenido generado con la propiedad content.
Las transiciones animan el cambio entre dos estados de forma suave: transition: propiedad duración. Por ejemplo, un botón puede cambiar de color suavemente al pasar el mouse en vez de saltar bruscamente.
Estos recursos, usados con moderación, hacen que una interfaz se sienta pulida y responde a la interacción del usuario sin necesidad de JavaScript.
Ejemplo — pruébalo tú mismo
Ponlo a prueba: Agrega una transición de 0.3s al cambio de color de fondo de un botón en :hover.