How can you style the first line of a paragraph differently?

Q: How can you style the first line of a paragraph differently?

The `::first-line` pseudo-element in CSS allows you to style only the first line of a block-level element. This is helpful for adding emphasis, decorative effects, or visual hierarchy to the start of a paragraph. `::first-line` targets only the first rendered line of text within a block element. It can be styled with text-related properties such as `color`, `font-size`, `font-weight`, `letter-spacing`, and `word-spacing`. It works exclusively on block-level elements like ` `, ` `, or ` `. It cannot insert content; it only modifies the appearance of the existing text. p::first-line { font-weight: bold; color: dodgerblue; text-transform: uppercase; } This paragraph has its first line styled to be bold, blue, and uppercase using the ::first-line pseudo-element. Here, only the first line of the paragraph is styled differently, providing emphasis while the rest of the paragraph remains normal. Use `::first-line` to highlight or emphasize the start of paragraphs. Stick to text-related CSS properties for consistent results. Consider responsive layouts, as the first line may wrap differently on various screen sizes. Combine with `::first-letter` for advanced typographic effects.

Difficulty: 3/10

first-line styling, CSS pseudo-elements, line-height inheritance

Styling the First Line of a Paragraph Using ::first-line

The ::first-line pseudo-element in CSS allows you to style only the first line of a block-level element. This is helpful for adding emphasis, decorative effects, or visual hierarchy to the start of a paragraph.

Key Points

1
::first-line targets only the first rendered line of text within a block element.
2
It can be styled with text-related properties such as color, , , , and .

How can you style the first line of a paragraph differently?

Styling the First Line of a Paragraph Using ::first-line

Scenario Questions

Follow-up Questions