CODEWITHSUNDEEP
csspseudo-element
pahnin
pahnin

Reputation: 5588

:first-letter selector doesn't work for link

The :first-letter pseudo-element selector works perfectly for a <p> element but not for links. This, for instance, has no effect:

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

Why? How can I make the first-letter style different for an <a> element

Upvotes: 7

Views: 10768

Answers (2)

Mark Amery
Mark Amery

Reputation: 154725

Check the specification. As of now, inline elements are not supported by ::first-letter:

In CSS, the ::first-letter pseudo-element applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements.
Note: A future version of this specification may allow this pseudo-element to apply to more display types.
https://www.w3.org/TR/selectors-3/#application-in-css

Thus, if you try to style the ::first-letter of something that isn't a "block-like 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>

Upvotes: 4

Rob W
Rob W

Reputation: 349012

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/

Upvotes: 5

Related Questions