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.

Scenario Questions

0-2 years experience

1How 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?
2What happens if you apply ::first-line to a div with display: inline? Why doesn't it work?
3You'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

1A 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?
2We'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?
3Our 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

1You'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?
2In 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?
3How 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

1We'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?
2How 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?
3In 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?

Sharethis question

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.