CSS ::first-letter Pseudo-Element

CSS ::first-letter Pseudo-Element

The ::first-letter pseudo-element styles the first letter of the first formatted line of a block container. It is commonly used to create decorative initials, enlarged first letters, and drop caps without adding extra HTML elements around individual characters.

Syntax

selector::first-letter {
  property: value;
}

The selector identifies the element whose first letter should be styled.

The ::first-letter pseudo-element targets the first typographic letter unit of the element's first formatted line, including certain preceding or following punctuation when applicable.

For example:

p::first-letter {
  color: #0066cc;
  font-size: 32px;
  font-weight: bold;
}

This rule makes the first letter of each qualifying paragraph larger, blue, and bold.

The double-colon syntax is the modern standard for pseudo-elements.

The older single-colon form, :first-letter, is also supported for backward compatibility, but ::first-letter is preferred for new CSS.

How It Works

The browser determines the first formatted line of an eligible element and identifies its first typographic letter unit.

The ::first-letter pseudo-element allows CSS to style that letter without requiring a separate <span> element.

For example:

<p>CSS controls the appearance of webpages.</p>

With the following CSS:

p::first-letter {
  color: #cc3300;
  font-size: 30px;
}

The letter "C" receives the specified styling, while the remaining text retains its normal appearance.

The pseudo-element does not change the underlying HTML text.

It can also apply when the first letter appears inside certain nested inline elements.

Not every element supports ::first-letter. It applies to eligible block containers and certain other elements with suitable formatting conditions.

Basic Example

The following example changes the color, size, and weight of a paragraph's first letter.

HTML:

<p class="first-letter-basic">CSS makes webpages more visually appealing.</p>

CSS:

.first-letter-basic::first-letter {
  color: #0066cc;
  font-size: 36px;
  font-weight: bold;
}

The first letter is styled independently from the rest of the paragraph.

No additional HTML markup is required around the letter.

Styling the First Letter

The ::first-letter pseudo-element supports several CSS properties for changing the appearance of the first letter.

Changing Text Color

p::first-letter {
  color: #cc3300;
}

This rule changes the first letter to a reddish-orange color.

Changing Font Size

p::first-letter {
  font-size: 40px;
}

This rule enlarges the first letter.

Changing Font Weight

p::first-letter {
  font-weight: bold;
}

This rule makes the first letter bold.

Changing Font Family

p::first-letter {
  font-family: Georgia, serif;
}

This rule uses a serif font for the first letter.

Changing the Background

p::first-letter {
  background-color: #fff2cc;
}

This rule adds a light yellow background behind the first letter.

These declarations can be combined to create decorative initials while leaving the rest of the paragraph unchanged.

Creating Drop Caps

A drop cap is an enlarged initial letter that extends alongside several lines of text.

Drop caps are often used in articles, magazines, and editorial layouts.

The ::first-letter pseudo-element can create a traditional drop cap using the float property.

HTML:

<p class="drop-cap">CSS provides flexible tools for styling text and creating attractive page layouts. Decorative first letters can make introductory paragraphs stand out.</p>

CSS:

.drop-cap::first-letter {
  float: left;
  color: #0066cc;
  font-family: Georgia, serif;
  font-size: 60px;
  line-height: 0.85;
  padding-right: 8px;
  font-weight: bold;
}

The first letter floats to the left, allowing the following text to wrap alongside it.

The enlarged initial creates a magazine-style appearance without additional HTML markup.

Adjust the font size, line height, and spacing to suit the surrounding text.

Note: Drop cap appearance depends on the font and line-height settings. Test the layout at different screen sizes to avoid awkward text wrapping.

Punctuation and First Letters

The ::first-letter pseudo-element can include punctuation associated with the first letter.

For example, if a paragraph begins with an opening quotation mark, the quotation mark may be included in the styled portion.

<p class="quoted-text">&ldquo;CSS is powerful.&rdquo;</p>

CSS:

.quoted-text::first-letter {
  color: #cc3300;
  font-size: 36px;
}

The opening quotation mark and the first letter may both receive the styling, according to the CSS rules for first-letter punctuation.

The pseudo-element can include punctuation that precedes or follows the first typographic letter unit.

It does not simply select the first character in the HTML source.

Whitespace and the formatting of the first line can affect which text is selected.

Nested Elements

The first letter of an element may appear inside a nested inline element.

For example:

<p class="nested-letter"><strong>CSS</strong> controls webpage styling.</p>

CSS:

.nested-letter::first-letter {
  color: #0066cc;
  font-size: 36px;
}

The first letter can still be styled even though it appears inside the <strong> element.

The browser determines the first eligible letter from the formatted text.

However, nested block elements and certain layout configurations can change whether the pseudo-element applies.

The ::first-letter pseudo-element should not be treated as a general selector for the first character of every element.

Supported CSS Properties

The ::first-letter pseudo-element supports a defined collection of CSS properties.

Common supported property groups include:

Some properties have additional conditions or limitations.

For example, margin, padding, and border behavior can depend on whether the first letter is floated.

Properties that are not supported for ::first-letter should not be relied upon to change its layout or appearance.

Example

The following example creates a decorative first letter using a serif font, a larger size, and a colored background.

HTML:

<p class="decorative-letter">Learning CSS helps developers create consistent and attractive webpages.</p>

CSS:

.decorative-letter::first-letter {
  color: #fff;
  background-color: #0066cc;
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
}

The first letter receives a blue background and white text.

The remaining letters retain the paragraph's normal styling.

This technique is useful for introductory text, editorial headings, and decorative content.

Note: Padding and border rendering on an inline first letter may vary. For a consistently boxed initial, consider using a floated first letter or an explicit HTML element.

::first-letter vs. ::first-line

The ::first-letter and ::first-line pseudo-elements style different portions of text.

::first-letter

The ::first-letter pseudo-element targets the first typographic letter unit of the first formatted line, including applicable punctuation.

p::first-letter {
  color: #0066cc;
  font-size: 36px;
}

This rule styles the first letter of each qualifying paragraph.

::first-line

The ::first-line pseudo-element targets the entire first formatted line of text.

p::first-line {
  color: #0066cc;
  font-weight: bold;
}

This rule styles all the text that appears on the paragraph's first formatted line.

The amount of text included in ::first-line can change when the container width or font size changes.

Both pseudo-elements can be applied to the same paragraph.

p::first-line {
  font-weight: bold;
}
p::first-letter {
  color: #cc3300;
  font-size: 36px;
}

This combination makes the first line bold and gives its first letter a larger, reddish-orange appearance.

Limitations

The ::first-letter pseudo-element has several important limitations.

• It applies only to eligible elements with suitable formatting conditions.
• It targets the first typographic letter unit rather than an arbitrary character position.
• It may include associated punctuation.
• It supports only a defined collection of CSS properties.
• Its behavior can depend on nested elements and layout formatting.
• It cannot select the second or third letter of a word.
• It does not insert or replace text content.

For example, the following selector is not a valid way to target the second letter:

p::first-letter(2) {
  color: red;
}

The ::first-letter pseudo-element does not accept a numeric argument.

To style individual characters in arbitrary positions, use appropriate HTML markup such as <span> elements.

Accessibility Considerations

Decorative first letters can improve visual presentation, but they should not interfere with readability.

Follow these accessibility practices:

• Maintain sufficient contrast between the first letter and its background.
• Use a font size that does not overlap surrounding text.
• Test drop caps at different screen sizes and zoom levels.
• Avoid excessive decoration that makes the first word difficult to recognize.
• Preserve the original text in the HTML document.
• Do not rely on the first letter's color alone to communicate meaning.

The ::first-letter pseudo-element changes presentation without adding or removing characters from the document.

When CSS is unavailable, the text remains readable in its original order.

For responsive layouts, consider reducing oversized initials on smaller screens.

@media (max-width: 480px) {
  .drop-cap::first-letter {
    font-size: 42px;
  }
}

This rule reduces the drop cap size on narrow viewports.

Browser Support

The ::first-letter pseudo-element is widely available in modern browsers, including Chrome, Edge, Firefox, and Safari.

The older single-colon syntax, :first-letter, is also supported for backward compatibility.

Rendering differences can occur with certain fonts, punctuation, complex text, and floated first letters.

For current compatibility information, visit Can I Use? .

Specifications

The ::first-letter pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 .

The specification describes which text is selected, how punctuation is handled, and which CSS properties can apply to the first letter.