Pseudo-element Text

You will be able to use CSS pseudo-elements ::first-line and ::first-letter to style the opening line and initial letter of a block of text without adding extra markup.

What it is

::first-line and ::first-letter are CSS pseudo-elements that target text generated by a block container. ::first-line styles the first line after layout, while ::first-letter styles the first typographic letter unit of that line. They are commonly used for typographic effects such as drop caps, small caps, and emphasized opening lines.

Related terms include block container, inline text, drop cap, small caps, and layout-dependent styling.

Why it matters

• It keeps HTML clean by avoiding extra <span> elements just for styling.
• It supports classic book-like typography, such as a large first letter.
• It can improve readability by emphasizing the opening line of a paragraph.
• It works with normal CSS inheritance and cascade rules.
• It is useful for editorial layouts where the first line or letter has a distinct visual role.

Syntax or steps

Use a selector that targets a block container, then add the pseudo-element.

selector::first-letter {
  /* limited typographic properties */
}

selector::first-line {
  /* limited inline text properties */
}

For modern CSS, use the double-colon form. The single-colon form, such as :first-letter, is legacy and should be avoided in new code. ::first-line supports a limited set of inline text properties, such as font, color, background, text-decoration, text-transform, letter-spacing, word-spacing, and line-height.

Example

<article>
  <p>Typography is easier to read when the opening line and first letter are styled deliberately.</p>
</article>

<style>
article p {
  max-width: 40rem;
  font-family: Georgia, serif;
  line-height: 1.5;
}

article p::first-letter {
  font-size: 2.2em;
  font-weight: 700;
  float: left;
  line-height: 0.8;
  margin-right: 0.08em;
}

article p::first-line {
  font-variant: small-caps;
  letter-spacing: 0.02em;
}
</style>

The HTML creates a paragraph inside an article. The base paragraph rule sets a readable measure and line height. The ::first-letter rule makes the first letter larger, bold, and floated left, creating a drop cap. The line-height and margin-right values prevent the large letter from crowding the following text. The ::first-line rule applies small caps and slight letter spacing to the first visual line.

Common mistakes

• Applying them to inline elements. These pseudo-elements work on block containers such as p, div, or h1. If you target a span, make it a block container or use a different approach.
• Assuming the first line is fixed. ::first-line depends on layout. If the viewport width changes, the first line may contain different words.
• Using unsupported properties. Properties such as float are not supported on ::first-line. Keep ::first-line styling to inline text properties.
• Forgetting leading whitespace or punctuation. If the first character is whitespace or unusual punctuation, the styled letter may not appear where expected.

When to use it

Use ::first-letter and ::first-line when you need typographic control over the opening of a block without changing the HTML. Use explicit markup when you need to target arbitrary text segments or apply properties that pseudo-elements do not support.

Practice

Guided exercise: Create a paragraph with font-family: Georgia, serif;. Add a ::first-letter rule that sets font-size: 2em; and float: left;. Add a ::first-line rule that sets font-variant: small-caps;. Expected result: the first letter appears as a drop cap, and the first line appears in small caps.

Challenge: Apply the ::first-line small-caps effect only when the viewport is at least 600 pixels wide. Hint: place the ::first-line rule inside a media query such as @media (min-width: 600px) { ... }.

Quick check

Question: Why might ::first-line not style the first visible line you expect?

Answer: Because it targets the first line after layout, so changes in width, font size, or text wrapping can change which text is considered the first line.

Summary

::first-letter and ::first-line provide lightweight typographic control for the opening of block-level text. They are best for layout-aware effects such as drop caps and emphasized first lines, while explicit markup is better for arbitrary text segments.