::first-line & ::first-letter

These two typographic pseudo-elements let you style part of an element's text—the first rendered line, or the first character— without wrapping that text in an extra <span>.

::first-line

::first-line styles the first line of text exactly as it is rendered on the screen. The browser determines where the first line ends based on the available width, font, and layout rather than a fixed number of characters.

CSS

p::first-line {
  font-weight: 600;
  color: #1f2937;
}

Note

Because the first line depends on the layout, its contents can change whenever the viewport size, font size, or container width changes. It always targets the text occupying the first rendered line rather than a fixed substring.

::first-letter

::first-letter styles the first character of an element's text content. It is commonly used to create a magazine-style drop cap.

CSS

p::first-letter {
  font-size: 1.2em;
  font-weight: 700;
}

Worked example: a classic drop cap

CSS

.article p:first-of-type::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: 0.9;
  font-weight: 700;
  padding-right: 0.08em;
  color: #2563eb;
}

HTML

<div class="article">
  <p>
    Once upon a time, in a small coastal town, there lived a
    lighthouse keeper who had never once seen the sea calm.
  </p>
</div>

Combined with float: left, the enlarged first letter drops down and allows the following lines of text to wrap around it. This is the classic effect used in magazines and books for the opening paragraph of an article or chapter.

What you can style

Note

Both ::first-line and ::first-letter support only a limited set of CSS properties, mainly those related to fonts, text, color, and backgrounds. ::first-letter also supports properties such as float, margins, and padding. Layout properties like display: grid or display: flex do not apply because these pseudo-elements are not real DOM elements.