Check out this fiddle: http://jsfiddle.net/sajYc/
The transition for the :after pseudo element works in firefox, but fails in webkit based browsers. Any idea if this is coming up in a future release? Any non-jquery overkill workarounds for it?
Basically, I'm using it on a page to fade between two states of a background image sprite(instead of two colors like in the fiddle). A smooth transition between an icon's normal and hover state. So I don't want to add a bunch of actual elements to it just to make this animation work.
Unfortunately, this is a known issue in Webkit browsers and IE:
http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
However, fading between image sprite states is do-able in jQuery. This tutorial gives a good run down:
来源：https://stackoverflow.com/questions/7922022/css3-transition-for-after-pseudoelement