: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;
}

I'm a div
I'm a span
I'm an anchor

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;
}

I'm a div
I'm a span
I'm an anchor