CSS ::first-line Selector

Definition and Usage

The ::first-line pseudo-element styles the first formatted line of a block container. How long that line is depends on width, font size, and wrapping—not on a fixed word count.

Prefer the double-colon form. Browsers still accept legacy :first-line. For only the opening character, use ::first-letter.

CSS Syntax

Example: p::first-line { font-weight: bold; text-decoration: underline; }

Selector Forms

Allowed Properties

Only a small subset of CSS properties works on ::first-line. Others are ignored.

How to Use ::first-line

Target a block of text, then apply only the properties that are allowed on ::first-line.

1. Choose a block container (p, div, heading, …).
2. Write E::first-line.
3. Set font, color, background, or text decoration—not margin or float.
4. Resize the container and confirm the styled span still looks right.

Live Preview

Toggle presets on the sample. Resize the window width—the first line (and which words are styled) can change.

CSS Examples

Each snippet focuses on ::first-line. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
  p::first-line {
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: underline;
  }
</style>

<p>In warm ocean waters around the world, you may see a fish leaping from the water and soaring dozens of meters before returning to the ocean.</p>

<style>
  p::first-line {
    color: #1d4ed8;
    background: #dbeafe;
    font-weight: 700;
  }
</style>

<p>Styles apply only to the first line of this paragraph. After that, all text looks normal again.</p>

<style>
  p::first-line {
    font-weight: 700;
    color: #334155;
  }

  p::first-letter {
    color: #dc2626;
    font-size: 1.5rem;
  }
</style>

<p>Flying fish leap from warm waters and glide above the surface before diving again.</p>

Key Takeaways