CSS ::first-letter Pseudo Element

❮ Prev Next ❯

The ::first-letter pseudo-element puts a style on a first letter of the first line in a block-level container. It does not select inline-level elements, such as images or inline-tables.

The ::first-letter pseudo-element does not identify punctuation marks that precede or immediately follows the first letter. It also applies if the first letter is, in fact, a number.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

CSS3 specification introduced the ::first-letter to distinguish pseudo-classes from pseudo-elements.

Allowable properties

Here are the CSS properties that can be used with the ::first-letter pseudo-element:

Font properties: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-weight, font-size, font-size-adjust, line-height and font-family.

Background properties: background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image, and background-clip.

Margin properties: margin, margin-top, margin-right, margin-bottom, margin-left.

Padding properties: padding, padding-top, padding-right, padding-bottom, padding-left.

Border properties: shorthands, border-style, border-color, border-width, border-radius, border-image, longhands.

The color property.

The text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only float: none;).

Version

Selectors Level 3

CSS Level 2 (Revision 1)

CSS Level 1

Syntax

::first-letter {
  css declarations;
}

Example of the ::first-letter pseudo-element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 35px;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Result

Example of the ::first-letter pseudo-element with punctuation mark and a digit:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 35px;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>-Lorem ipsum is simply dummy text...</p>
    <p>1Lorem ipsum is simply dummy text...</p>
  </body>
</html>