CSS ::first-line Selector

What You’ll Learn

The ::first-line pseudo-element styles the entire first line of text inside a block container. It is useful for emphasizing opening sentences and creating editorial typography effects.

Introduction

The ::first-line selector in CSS is a pseudo-element used to apply styles specifically to the first formatted line of text inside a block-level element.

It lets you enhance the opening line of paragraphs, articles, and other block containers without wrapping that text in extra HTML tags.

Definition and Usage

Append ::first-line to a selector with no space before the colons: p::first-line or article p::first-line. Only the first line receives the styles; wrapped lines keep the element’s default appearance.

📝 Syntax

The syntax for the ::first-line pseudo-element is:

element::first-line {
  /* CSS properties */
}

Here, element is a block container such as p, div, or article. The pseudo-element selects the first line of text rendered inside that element.

Basic Example

p::first-line {
  font-weight: 700;
  color: #2563eb;
  font-size: 1.125rem;
}

Syntax Rules

• Use double colons :: for pseudo-elements in modern CSS.
• Works on block containers, list items, table cells, and inline-block elements.
• Only a limited set of properties applies (mostly font and text properties).
• Margin, padding, border, and float do not work on ::first-line.
• Can be combined with ::first-letter on the same element.

Supported Properties

Related Selectors

• ::first-letter — styles only the first character of the first line
• ::before / ::after — insert generated content
• ::selection — styles user-highlighted text
• :first-child — structural pseudo-class for element position (different purpose)

When to Use ::first-line

::first-line adds subtle editorial emphasis to long-form text:

• Article intros — Make the opening sentence bold or larger.
• Blog posts — Draw attention to the lead line before the reader continues.
• Pull quotes — Style the first line of a blockquote differently.
• Small caps effect — Apply font-variant: small-caps to the first line.
• Combined with ::first-letter — Drop cap on the letter, distinct styling on the rest of the line.

Examples Gallery

Practice ::first-line with basic emphasis, article intros, background highlights, and combined letter + line styling.

<style>
  p::first-line {
    font-weight: 700;
    color: #2563eb;
    font-size: 1.125rem;
  }
</style>

<p>
  The CSS ::first-line pseudo-element applies unique styling to the first line
  of a block-level element. This makes the opening sentence visually distinctive.
</p>

article p::first-line {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: #1e293b;
  font-weight: 600;
}

.intro::first-line {
  background-color: #fef9c3;
  color: #713f12;
  font-weight: 600;
}

p::first-letter {
  font-size: 2.5rem;
  font-weight: 800;
  color: #7c3aed;
  float: left;
  margin-right: 0.3rem;
  line-height: 0.9;
}

p::first-line {
  font-weight: 600;
  color: #334155;
  font-size: 1.05rem;
}

⚠️ Common Pitfalls

• Responsive wrapping — The styled portion changes when the container width or font size changes. Test on mobile.
• Unsupported properties — margin, padding, border, and float have no effect on ::first-line.
• Inline elements — Plain span elements do not support ::first-line unless display is changed to block or inline-block.
• Expecting a fixed word count — You cannot style “the first 10 words” with ::first-line; only the first visual line matches.
• Single vs double colon — Prefer ::first-line (pseudo-element) in new code.

♿ Accessibility

• Decorative enhancement — First-line styling is visual; screen readers still read the full paragraph normally.
• Do not convey meaning with styling alone — Important information should not depend on first-line appearance.
• Contrast — Ensure colored or highlighted first lines meet WCAG contrast requirements.
• Readability — Avoid extreme size differences that make the opening line hard to read on small screens.

💡 Best Practices