::first-line
Styles the first rendered line of a block — however many words fit on it.
Syntax
selector::first-line { … }Examples
The first line is highlighted:
<style>
.lead::first-line { font-weight: bold; text-transform: uppercase; }
</style>
<p class="lead" style="max-width: 300px;">The first line of this paragraph is bold and in capitals, however wide the window is. The rest stays normal.</p>Notes
The line is recalculated when the width changes, so the style always covers exactly one line. Only font, color, background and text properties work here.
See also
- ::first-letter — Styles the first letter of a block's first line — for drop caps.
- text-transform — Changes the case of letters on display.
Related recipes
In the tutorial
- Pseudo-elements — How to style part of an element or add decorative content — before, after, first-letter, marker, placeholder and selection.