The ::first-line pseudo-element in CSS allows you to target and style only the first line of a block-level element. It is useful for emphasizing the start of paragraphs or adding decorative effects to the initial line of text.

Key Points

1
::first-line targets the first rendered line of text within a block-level element.
2
It can be styled with properties related to text, such as color, font, letter-spacing, and word-spacing.
3
It applies only to block-level elements like <p>, <div>, or <section>.
4
It cannot be used to insert content; it only styles the existing first line.

Example: Styling the First Line of a Paragraph

In this example, only the first line of the paragraph is affected, giving it emphasis while the rest of the text remains unchanged.

Best Practices

1
Use ::first-line to highlight the beginning of content for readability or visual emphasis.
2
Limit styling to text-related properties; other CSS properties like margin or padding have no effect.
3
Test across browsers and screen sizes, as the first line may wrap differently depending on width.
4
Combine with other pseudo-elements like ::first-letter for advanced typographic effects.

Difficulty: 3/10

Topics: pseudo-elements, text styling, CSS specificity

Scenario Questions

0-2 years experience

1
How would you make the first line of a paragraph red and bold using CSS, and what happens if you try to set margin-top on it?
2
What happens if you apply ::first-line to a div with display: inline? Why doesn't it work?
3
You're trying to style the first line of a heading, but it's not changing color — what are two things you'd check?

2-5 years experience

1
A client says the first line of their article body isn't styling correctly on mobile — the font weight disappears. What could be causing this, and how would you debug it?
2
We're using ::first-line to highlight the opening line of a blog post, but it breaks when we add a drop cap using ::first-letter. How do you resolve the conflict?
3
Our design team wants the first line of a multi-column layout to have a different color, but it's inconsistent across browsers. What’s your approach to making this reliable?

5-8 years experience

1
You're building a high-performance news reader that renders thousands of articles — how would you evaluate whether ::first-line is a performance bottleneck, and what alternatives would you consider?
2
In a legacy CMS, ::first-line is used to style article intros, but it's causing layout thrashing on low-end devices. How would you redesign this without losing the visual effect?
3
How would you handle ::first-line styling in a component library that supports RTL languages and dynamic font scaling? What edge cases would you prioritize?

8+ years experience

1
We're migrating from a legacy CSS architecture that uses inline spans for first-line styling to modern pseudo-elements — what are the cross-team risks, and how would you plan the rollout to avoid visual regressions across 50+ products?
2
How would you architect a theming system that allows product teams to customize ::first-line styles without introducing specificity wars or breaking responsive layouts, while maintaining accessibility compliance?
3
In a global content platform, ::first-line styling behaves differently across 12 languages due to line-breaking rules. How do you design a scalable, maintainable solution that accommodates linguistic diversity without bloating the CSS bundle?

Follow-up Questions

❓What happens if the first line contains a floated element?
❓How does ::first-line behave when the element is dynamically resized?
❓Can you style the first line differently if it's broken across multiple lines due to responsive design?