Pseudo-element (podwójny dwukropek ::) stylizuje określoną część elementu lub generuje zawartość, która nie istnieje w HTML — bez dodawania dodatkowych znaczników.
::before i ::after — wygenerowana zawartość
css
{
: ;
}
{
: ;
}
Pseudo-element (podwójny dwukropek ::) stylizuje określoną część elementu lub generuje zawartość, która nie istnieje w HTML — bez dodawania dodatkowych znaczników.
{
: ;
}
{
: ;
}
Właściwość content jest obowiązkowa — bez niej pseudo-element się nie renderuje. Wygenerowana zawartość jest dzieckiem na samym początku (::before) lub na końcu (::after) elementu.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
To jest klasyczne użycie: rysowanie strzałek, odznak, nakładek, linii dekoracyjnych — utrzymanie HTML bez elementów czysto wizualnych.
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3 wprowadził :: w celu odróżnienia pseudo-elementów od pseudo-klas (przeglądarki wciąż akceptują jeden dwukropek na starych dla kompatybilności, ale używaj ::).
Wygenerowana content jest odczytywana przez niektóre czytniki ekranu — nie umieszczaj istotnych informacji tylko w ::before/::after (używaj do dekoracji), a ikony dekoracyjne najlepiej pozostaw poza drzewem dostępności.
Pseudo-elementy umożliwiają dodawanie ikon, kształtów dekoracyjnych (strzałek, separatorów), kapitalików i liczników czystego CSS — bez dodatkowych <div>s lub <span>s.
Utrzymują znaczniki semantyczne, jednocześnie umożliwiając bogatą wizualną szczegółowość, i są niezbędnym elementem czystego, łatwego w utrzymaniu stylu.