CSS Transition: First Hover Letter

Question

I use :first-letter to orient the first letter in the logo with some style. When you hover, the color of this letter changes.

How do I make this color fade with CSS transition? Adding transition properties to any of my selectors does not work.

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

Edit: Obviously, Firefox 4+ is the only browser that supports the transition of pseudo-elements, however I cannot get the script above to work even in this browser.

Answer 1

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

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

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