Za pomocą selektora ::first-line możemy sprawić, że treść znajdująca się w pierwszym wierszu interesującego nas elementu HTML zostanie umieszczona w dodatkowym pseudoelemencie.
Informacje techniczne o selektorze ::first-line
ograniczenie - elementy HTML
Tylko element HTML typu block, typu inline-block, typu table-caption lub typu table-cell.
ograniczenie - właściwości CSS
Tylko następujące właściwości CSS: font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height.
Przykładowa reguła CSS, selektor ::first-line
Wyjaśnienie przykładowej reguły CSS
p::first-line
spraw, aby treść znajdująca się w pierwszym wierszu każdego elementu p została umieszczona w dodatkowym pseudoelemencie oraz
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Kurs CSS</title>
<style>
p::first-line {
color:red;
}
</style>
</head>
<body>
<div>
tekst znajdujący się w pierwszym wierszu tego elementu "div" nie został umieszczony w dodatkowym pseudoelemencie oraz nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"
</div>
<p>
tekst znajdujący się w pierwszym wierszu tego elementu "p" został umieszczony w dodatkowym pseudoelemencie oraz jest koloru czerwonego, ponieważ ten element HTML jest elementem "p"
</p>
<div>
tekst znajdujący się w pierwszym wierszu tego elementu "div" nie został umieszczony w dodatkowym pseudoelemencie oraz nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"
</div>
</body>
</html>
