CSS-Übergang von: first-letter on hover

Question

Ich verwende :first-letter, um den ersten Buchstaben in einem Logo mit etwas Styling anzusprechen. Beim Schweben ändert sich die Farbe dieses Briefes.

Wie würde ich diese Farbe mit einem CSS-Übergang einblenden lassen? Das Hinzufügen der Übergangseigenschaften zu einem meiner Selektoren scheint nicht zu funktionieren.

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

Edit: Anscheinend Firefox 4+ ist der einzige Browser, den Übergang von Pseudo-Elementen unterstützt, jedoch nicht in der Lage ist ich über die Fiddle zu erhalten, auch in diesem Browser zu arbeiten.

Answer 1

Aufgrund der schlechten Browser-Unterstützung ist der beste Weg, um dieses Problem zu lösen, den ersten Buchstaben in einem Span zu wickeln und dem Span eine Klasse zu geben.

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

Ich habe Ihre jsfiddle hier aktualisiert zu demonstrieren: http://jsfiddle.net/YCMMZ/3/