Selektor CSS ::first-line – czyli zmiana wyglądu pierwszej linii tekstu

Czas czytania: < 1 minut

Pseudoelement CSS ::first-line wykorzystywany jest do zmiany właściwości pierwszej linii obiektu blokowego.

Czyli np. modyfikuje pierwszy wiersz elementów takich jak <p>, <div>. Bierze przy tym pod uwagę szerokość pierwszej linki akapitu tekstowego. Czyli jeśli zważymy stronę tekst przeniesiony do 2 linii się nie liczy.

Elementy na które właściwość ma wpływ ::first-line

• color (kolor czcionki)
• background (kolor tła)
• word-spacing (odstępy pomiędzy słowami)
• letter-spacing (odstępy pomiędzy literami)
• text-decoration (dekoracja tekstu np. podkreślenie)
• vertical-align (kierunek tekstu)
• text-transform (zmiana rozmiaru grubości czcionki)
• line-height (przerwa między wierszami)
• clear

Jak widać z pomocą tej funkcji CSS możemy dokonać bardzo istotnych zmian dla pierwszej linii edytowanego elementu.

Z selektora mogą korzystać tylko elementy HTML typu blokowego jak (display): block, inline-block, table-caption lub typu table-cell.

Przykładowa deklaracja:

 p::first-line { 
    background-color: pink;
}

Przykład:

Przykładowe użycie selektora wygląda następująco:

<div class="demo">
<p>O to przykładowy tekst z zastosowaniem pseudo klasy ::first-line. Pokolorowany zostanie tylko pierwszy wiersz akapitu.</p>
<p>Tekst umieszczono w kontenerze jako obiekt blokowy.</p>
</div>

Deklaracja CSS z zaprezentowanego przykładu:

.demo{
max-width:300px;
border: 1px solid #ccc;
}
.demo p::first-line { 
    background-color: pink;
}

Jak widać w powyższym przykładzie pokolorowane zostały jedynie pierwsze linki akapitu a pozostałe nie uległy zmianie.

Selector	Chrome	Internet Explorer / Edge	Firefox	Safari	Opera
::first-line	1.0	9.0 Partial from 5.5	1.0	1.0	7.0 Partial from 3.5

Źródło: https://www.w3schools.com/cssref/sel_firstline.asp

Dodatkowe tagi:
W jaki sposób wyróżnić pierwszy wiersz, rządek tekstu?
Zmiana właściwości pierwszej linijki akapitu z pomocą CSS