CSS Transitions with :before and :after pseudo elements

Question

Can\'t seem to animate pseudo elements with -webkit-transition. The fiddle below shows what I mean when run in Chrome/Safari, I guess this isn\'t supported right now?

<

Answer 1

Well, actually, you can.

You just need to leverage the often forgotten inherit value. Unfortunately we can't (yet) directly target pseudo-elements with custom animations, but we surely can let them share the same animation of the "parent" element by inheriting the properties we wish to animate.

See my fiddle here.