::first-letter

Avatar of Sara Cope
Sara Cope on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a <span> tag around that first letter in your HTML. While no tags are added to the DOM, it is as if the targeted first letter were encompassed in a tag. You can style that first letter as you would a real element with:

p::first-letter {
  font-weight: bold;
  color: red;
}
<p>The first letter is bold and red</p>

The result is as if you had a faux element around the first letter:

<!-- Just an example, does not work! -->
<p>
  <firstletter>T</firstletter>he first letter is bold and red.
</p>

The first letter is bold and red

  • The pseudo element only works if the parent element is a block container box (in other words, it doesn’t work on the first letter of display: inline; elements.)
  • If you have both a ::first-letter and ::first-line on an element, the first letter will inherit from the first line styles, but styles on the ::first-letter will overwrite when styles conflict.
  • If you generate content with ::before, the first letter or punctuation character, whether it’s part of the original text node or created with generated content, will be the target.

More Information

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
93.59125.1

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12212335.0-5.1

Note: For Internet Explorer 8 and down, use a single colon :first-letter instead of the double-colon notation.