The ::first-letter pseudo-element

I can’t figure out why I don’t see more use of ::first-letter other than people not knowing about it. Things like drop caps and initial letters are super common print, and have been forever. There are a few places I see it pop up on the web, but it’s far and few between.

And while there is the possibility of an initial-letter property (it’s partially supported by Safari at the time of writing), we can pull off the effect we need with the ::first-letter pseudo-element really easily.

How ::first-letter works

It’s a really simple pseudo-element, selecting the first letter of your selector, and letting you style it as you want.

.selector::first-letter {
  color: red;
  font-size: 2em;
}

If you want to get something that looks a bit fancier, you can, though it does take a little playing around with, it’s far from painful:

See the Pen first-letter by Kevin (@kevinpowell) on CodePen.

The above example works great, but as you can see from it, I did have to play around with a negative margin-bottom, which prevented a big whitespace under the drop cap. There isn’t too much styling that needs to go into something like this though, and it can add a really nice visual touch!

Browser Support of ::first-letter

Another reason I find it strange that more people aren’t using ::first-letter is that browser support for it is great, being supported by all modern browsers, and even as far back as IE6 (!) if you use the old :first-letter instead of with the double colon (and IE9 and up support the double colon version).

Don't want to miss an article?

If you never want to miss out on any of my content? Subscribe to my newsletter!

It's one email every Sunday to keep you up to date with what I've been up to, plus I'll throw in some bonus stuff every now and then that I don't post anywhere else :)

    We won't send you spam. Unsubscribe at any time.