webkit - 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?

http://jsfiddle.net/4rnsx/130/

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.