CSS transition of :first-letter on hover

Question

I'm using :first-letter to target the first letter in a logo with some styling. On hover the colour of this letter changes.

How would I get this colour to fade in with a CSS transition? Adding the transition properties to any of my selectors doesn't seem to work.

Fiddle: http://jsfiddle.net/alecrust/YCMMZ/

Edit: Apparently Firefox 4+ is the only browser that supports the transitioning of pseudo-elements, however I'm unable to get the Fiddle above to work even in that browser.

Answer 1

Due to poor browser support, the best way to solve this issue is to wrap your first letter in a span and give the span a class.

<header class="header">
    <h1 class="logo">
        <a href="index.html"><span class="transition">E</span>xample</a>
    </h1>
</header>​

I've updated your jsfiddle here to demonstrate: http://jsfiddle.net/YCMMZ/3/