A pseudo-element (dvojna pika ::) stilira specifičen del elementa, ali generiira vsebino, ki ni v HTML — brez dodajanja dodatne oznake.
::before in ::after — generiirana vsebina
css
{
: ;
}
{
: ;
}
A pseudo-element (dvojna pika ::) stilira specifičen del elementa, ali generiira vsebino, ki ni v HTML — brez dodajanja dodatne oznake.
{
: ;
}
{
: ;
}
Lastnost content je obvezna — brez nje se psevdo-element ne prikaže. Generiirana vsebina je otrok na samem začetku (::before) ali koncu (::after) elementa.
.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 je klasična uporaba: risanje puščic, značk, prekritij, dekorativnih črt — s čistim HTML brez čisto-vizualnih elementov.
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 je vpeljal :: za razlikovanje psevdo-elementov od psevdo-razredov (brskalniki še vedno sprejemajo enojno piko na starih za kompatibilnost, vendar uporabljajo ::).
Generiirana content jo berejo nekateri čitači zaslona — ne postavljajte bistvenih informacij samo v ::before/::after (uporabite jo za dekoracijo), in dekorativne ikone je najbolje izpustiti iz drevesa dostopnosti.
Psevdo-elementi vam omogočajo dodajanje ikon, dekorativnih oblik (puščic, delilnikov), inicialk in števcev čisto v CSS — brez dodatnih <div>-ov ali <span>-ov.
Ohranjajo semantični markup medtem ko omogočajo bogato vizualno detajlnost, in so temelj čistega, vzdrživanega sloga.