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?
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
At last the bug is fixed in Google Chrome.
You can start using transitions on pseudo elements, most Chromes have already updated as on January 24, 2013.
Waiting for Safari to pull these updates.
来源：https://stackoverflow.com/questions/7873261/applying-webkit-transitions-to-pseudo-elements