soy Kseso y esto EsCSS

Cómo animar pseudoelementos en Chrome

Cómo lograr animar con puro Css (animation/transition) los pseudoelementos en el navegador Chrome pese a que de momento sólo Firefox soporta esta posibilidad.

Cómo animar pseudoelementos en Chrome

·Por Kseso ✎ 1

Como todo el mundo sabe bien, sólo Firefox aplica las animaciones y transiciones a los pseudoelementos. Pero ésta limitación se puede solventar fácilmente. Sólo es necesario hacer uso del valor inherit para obrar la magia

Pero antes de meternos con las explicaciones, mira la demo, obra de Joshua Hibbert en codepen:

En el iframe del ejemplo, pincha en la pestaña "CSS" para ver los estilos.

Como puedes ver, la transición no se aplica al pseudoelemento si no al propio enlace, que aplica el valor de bottom al :hover, :focus. Mientras que para el pseudoelemento :after en todo momento aplica para esa propiedad de posicionamiento el valor en inherit.

Sencillo e ingenioso, ¿verdad?

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso