Menu
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.
283
The ::first-letter selector is used to add a style to the first letter of the specified selector. Note: The following properties can be used with ::first-letter: font properties. color properties.
The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
initial-letter is a CSS property that selects the first letter of the element where it is applied and specifies the number of lines the letter occupies. You may have seen something like this on news sites, where the first letter of a leading paragraph is larger than the rest of the content.
A drop cap (dropped capital) is a large capital letter used as a decorative element at the beginning of a paragraph or section.
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/
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
