:first-letter selector doesn't work for link

Question

The :first-letter pseudo-element selector works perfectly for a

element but not for links. This, for instance, has no effect:

<         


        

Answer 1

Per the spec, "the ::first-letter pseudo-element only applies to block containers." Thus, if you try to style the ::first-letter of something that isn't a "block container", like an inline element, it won't work. This doesn't just apply to links; you'll also find that, by default, you can't style the ::first-letter of a span either, as shown below:

div::first-letter, span::first-letter, a::first-letter {
    font-size:200%;
    text-transform:uppercase;
    color:#8A2BE2;
}

<div>I'm a div</div>
<span>I'm a span</span>
<a href="https://google.com">I'm an anchor</a>

A possible fix to this is to turn the element into a block container by, for instance, setting it to display: block or display: inline-block. Below is an example, using the former for the span and the latter for the a:

div::first-letter, span::first-letter, a::first-letter {
    font-size:200%;
    text-transform:uppercase;
    color:#8A2BE2;
}
span {
    display: block;
}
a {
    display: inline-block;
}

<div>I'm a div</div>
<span>I'm a span</span>
<a href="https://google.com">I'm an anchor</a>

Answer 2

According to the W3 spec, the :first-letter pseudo-element only work for a block element, which a is not.

Oddly, *:first-letter caused the first letter to transform, at Chrome 14 and Firefox 3.6.23. Fiddle: http://jsfiddle.net/8W7FF/3/