Use CSS transitions for pseudo-elements right now
Sometimes you want to do everything just on one element…
…and use transitions there
transition: top .3s;
Only Firefox supports transitions for pseudo-elements
But. There is a workaround.
More on it later, it’s demo time!
Width and height
…Those were just single HTML elements, yep.
So, the first part of solution is…
1. Add transition for some property on the element
2. Inherit this property on the pseudo-element
3. Change the value on the parent
…we don’t want to change the value on the parent!
This is where the second part of solution comes:
One single CSS property is lonely and somewhat dull
Multiple properties conjure magic
(Magic, described in the specs, btw)
1. Properties with sub-properties, like
2. “Limiting” properties, like
text-shadow instead of
color for text
4. Using another pseudo as the actual content
Not every property can be “limited” only to pseudos that way
transform for you. Sorry.
So, tell browsers to implement transitions for pseudo-elements like Firefox did
And experiment with the CSS in the meantime!