CSS ::first-line Pseudo-Element

CSS ::first-line Pseudo-Element

The ::first-line pseudo-element styles the first formatted line of text in an eligible block container. It allows developers to change the color, font, weight, and other supported text properties of the first line without adding extra HTML elements. The selected text changes automatically when the text wraps differently.

Syntax

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

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

The ::first-line pseudo-element targets the text appearing on the element's first formatted line.

The declarations inside the rule control the appearance of that line.

For example:

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

This rule makes the first formatted line of each qualifying paragraph blue and bold.

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

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

How It Works

The browser determines where text wraps into lines based on the available width, font, font size, and other layout conditions.

The ::first-line pseudo-element selects the first formatted line after the browser calculates the layout.

For example:

<p>CSS controls the appearance and layout of webpages. It provides tools for styling colors, fonts, spacing, and responsive designs.</p>

With the following CSS:

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

Only the text appearing on the first formatted line receives the reddish-orange color and bold weight.

If the paragraph becomes narrower, fewer words may fit on the first line.

If the paragraph becomes wider, more words may fit on the first line.

The pseudo-element automatically adjusts to these layout changes.

Unlike a manually inserted <span>, it does not select a fixed sequence of words.

Basic Example

The following example changes the color and weight of the first line of a paragraph.

HTML:

<p class="first-line-basic">CSS makes it easy to style text and create attractive webpages. The first line of this paragraph receives special formatting while the remaining lines retain their normal appearance.</p>

CSS:

.first-line-basic {
  max-width: 300px;
}
.first-line-basic::first-line {
  color: #0066cc;
  font-weight: bold;
}

The first formatted line appears blue and bold.

The remaining lines use the paragraph's normal text styling.

The exact words included in the first line depend on the available width and font metrics.

Styling the First Line

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

Changing Text Color

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

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

Changing Font Weight

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

This rule makes the first line bold.

Changing Font Size

p::first-line {
  font-size: 20px;
}

This rule increases the font size of the first line.

Changing Font Style

p::first-line {
  font-style: italic;
}

This rule makes the first line italic.

Changing the Background

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

This rule adds a light yellow background behind the text on the first line.

Adding Text Decoration

p::first-line {
  text-decoration: underline;
}

This rule underlines the first formatted line.

These declarations can be combined to create introductory text that stands out from the remaining paragraph.

Responsive Behavior

One of the main features of ::first-line is that its selected text responds automatically to changes in layout width.

The following example uses the same paragraph in two containers with different widths.

HTML:

<div class="line-wide">
  <p>CSS makes responsive layouts easier to create and maintain across different screen sizes.</p>
</div>
<div class="line-narrow">
  <p>CSS makes responsive layouts easier to create and maintain across different screen sizes.</p>
</div>

CSS:

.line-wide {
  max-width: 300px;
}
.line-narrow {
  max-width: 180px;
}
.line-wide p::first-line, .line-narrow p::first-line {
  color: #0066cc;
  font-weight: bold;
}

The wider container can fit more text on its first line.

The narrower container wraps sooner, so fewer words receive the first-line styling.

Both paragraphs use the same CSS selector.

The browser determines which text belongs to the first formatted line in each container.

Nested Elements

The first formatted line can contain nested inline elements such as <strong>, <em>, and <span>.

The ::first-line pseudo-element can affect text within these elements when they appear on the first formatted line.

For example:

<p class="nested-line"><strong>CSS selectors</strong> help developers target HTML elements and apply styles efficiently.</p>

CSS:

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

The first line receives the specified styling, including text within the nested <strong> element when it appears on that line.

However, declarations applied directly to nested elements can affect the final appearance through the CSS cascade.

The pseudo-element represents a formatted line rather than an actual HTML wrapper.

It cannot be accessed or manipulated as a separate DOM element.

Supported CSS Properties

The ::first-line pseudo-element supports a limited collection of CSS properties.

Common supported property groups include:

Properties that change the structure or positioning of an element, such as display, float, margin, and padding, are not supported for ::first-line.

For example, the following rule should not be used to add padding around the first formatted line:

p::first-line {
  padding: 10px;
}

The padding property is not part of the supported styling set for this pseudo-element.

Use supported font, color, background, and text properties instead.

Example

The following example creates a highlighted introductory line using a larger font size, bold text, and a light background.

HTML:

<p class="highlight-line">Learning CSS helps developers build consistent and attractive webpages. Understanding pseudo-elements provides additional control over text presentation without adding unnecessary HTML markup.</p>

CSS:

.highlight-line {
  max-width: 300px;
  line-height: 1.6;
}
.highlight-line::first-line {
  color: #0066cc;
  background-color: #eef5ff;
  font-size: 20px;
  font-weight: bold;
}

The first line appears larger, blue, and bold with a light blue background.

The remaining lines retain the paragraph's normal text styling.

Because the first line uses a larger font, the browser recalculates its text wrapping accordingly.

The highlighted text automatically adjusts when the available width changes.

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

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

::first-line

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

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

This rule styles all text appearing on the first line.

::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: #cc3300;
  font-size: 36px;
}

This rule styles only the first letter and any punctuation included by the first-letter rules.

Both pseudo-elements can be used together.

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

The first line becomes bold, while its first letter receives a larger font size and a reddish-orange color.

Limitations

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

• It applies only to eligible elements with suitable formatting conditions.
• It selects the first formatted line rather than a fixed number of words.
• Its selected text can change when the layout width or font changes.
• It supports only a limited collection of CSS properties.
• It does not create an HTML element or a separate DOM node.
• It cannot select the second or third line of a paragraph.
• It does not change the underlying text content.

For example, the following selector is not valid CSS:

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

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

To style a fixed portion of text, use appropriate HTML markup rather than relying on where the browser wraps the text.

Accessibility Considerations

Styling the first line can improve visual emphasis, but it should not reduce readability.

Follow these accessibility practices:

• Maintain sufficient contrast between text and background colors.
• Use readable font sizes and line heights.
• Test text wrapping at different screen sizes and zoom levels.
• Avoid excessive letter spacing or decorative effects that make text difficult to read.
• Do not rely on first-line styling to communicate essential information.
• Preserve the original text and reading order in the HTML document.

The ::first-line pseudo-element changes presentation without modifying the document's text content.

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

Because the first line changes with the layout, avoid using its styling to identify information that must always remain emphasized.

Browser Support

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

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

Minor rendering differences can occur because browsers may calculate text wrapping differently based on fonts and layout conditions.

For current compatibility information, visit Can I Use? .

Specifications

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

The specification describes how the first formatted line is selected, which CSS properties apply, and how the pseudo-element interacts with text formatting.