W CSS zapisana reguła ```css p::first-line {font-size: 150%;} ``` wykorzystana na stronie z wieloma paragrafami, z których każdy składa się z kilku linijek,...

Pseudoelement ::first-line w CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Pseudoelement `::first-line` w CSS

::first-line to pseudoelement CSS, który pozwala ostylować pierwszą wyświetlaną linię tekstu we wskazanym elemencie, np. w paragrafie <p>.

Składnia

p::first-line {
  font-size: 150%;
}

Taki zapis oznacza: wybierz pierwszą linię każdego elementu <p> i ustaw dla niej rozmiar czcionki na 150%.

Co dokładnie zostanie zmienione?

Jeśli na stronie znajduje się wiele paragrafów, reguła:

p::first-line { font-size: 150%; }

spowoduje, że pierwsza linia każdego paragrafu będzie miała większy rozmiar czcionki niż pozostałe linie tego samego paragrafu.

Nie oznacza to, że:
- zostanie powiększony tylko pierwszy paragraf na stronie,
- zostanie powiększony cały tekst w paragrafach,
- pierwsza linia będzie mniejsza.

Ważna cecha

Pierwsza linia nie jest stała w kodzie HTML. Zależy od sposobu łamania tekstu w przeglądarce, czyli m.in. od:
- szerokości elementu,
- rozmiaru czcionki,
- rodzaju fontu,
- szerokości okna przeglądarki.

Po zmianie szerokości strony pierwsza linia może obejmować inną liczbę wyrazów.

Przykład

<p>To jest dłuższy paragraf, który zajmuje kilka linii tekstu w przeglądarce.</p>

p::first-line {
  color: red;
  font-size: 150%;
}

Efekt: tylko pierwsza widoczna linia paragrafu będzie czerwona i powiększona.