Applying WebKit transitions to Pseudo Elements

Question

I have made a Fiddle for reference: http://jsfiddle.net/xypQY/

Which element would i apply WebKit transitions on to achieve a Fade In effect using opacity?

Answer 1

This is a webkit bug, transitions do not work in Chrome or Safari on pseudo-elements.

Please star this bug to hopefully help the ball get rolling on a fix:

Issue 54699: CSS3 transition not applied for pseudo elements

It has been reported to Webkit:

Bug 23209 - Transitions and animations do not apply to CSS generated content

so hopefully it will be fixed soon.

UPDATE: Support for transitions was added to Webkit on 01/02/2013: https://trac.webkit.org/changeset/138632