Pseudoelement CSS ::first-line reprezentuje pierwszy wiersz treści wybranego elementu blokowego. Język HTML nie zawiera elementu, który pozwalałby odnieść się do takiego fragmentu treści, ponieważ długość wiersza zależy od paru czynników, w tym od szerokości okna przeglądarki. Dlatego stworzono pseudoelement ::first-line, który ułatwia sformatowanie tego fragmentu treści, niezależnie od jego wymiarów.
Pseudoelement ::first-line jest traktowany jak element poziomu śródliniowego obsługujący tylko niektóre własności CSS:
- Własności czcionki
- Własności tła
- Własności
color,letter-spacing,line-height,text-decoration,text-decoration-color,text-decoration-line,text-decoration-style,text-shadow,text-transform,vertical-alignorazword-spacing
Przykład użycia ::first-line
W tym przykładzie pierwszy wiersz akapitu będzie miał zielony kolor pisma niezależnie od szerokości okna przeglądarki.
p::first-line {color: green}
…
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>W wąskim oknie przeglądarki ten akapit wygląda tak:
Natomiast w szerszym oknie jego wygląd zmieni się następująco:
Składnia ::first-line
Składnia pseudoelementu ::first-line:
::first-line {...}