How do you style only the first letter or first line of a paragraph?
Styling the First Letter or Line with CSS
CSS provides pseudo-elements ::first-letter and ::first-line to target and style only the first character or the first line of a block of text, allowing for typographic emphasis or decorative effects.
- 1
::first-letter– Styles the first character of a block element.- Common uses: Drop caps, larger initial letters, decorative fonts.
- 2
::first-line– Styles the first line of a block element.- Common uses: Highlighting the beginning of a paragraph, changing font weight, color, or style.
Using these pseudo-elements, you can emphasize the beginning of text without adding extra HTML elements, keeping your markup semantic and clean.
- 1
Use
::first-letterfor decorative initials or typographic emphasis in articles or headings. - 2
Use
::first-lineto highlight the opening of paragraphs for readability or stylistic effects. - 3
Combine with other text properties like
font-size,font-weight,color,line-heightfor visual impact. - 4
Avoid excessive styling that may reduce readability, especially on smaller screens.
- 5
Always test pseudo-element styles across different browsers to ensure consistent rendering.