Pseudo-element (dvotačka ::) stilizira određeni dio elementa, ili genira sadržaj koji nije u HTML-u — bez dodavanja dodatnog koda.
::before i ::after — generirani sadržaj
css
{
: ;
}
{
: ;
}
Pseudo-element (dvotačka ::) stilizira određeni dio elementa, ili genira sadržaj koji nije u HTML-u — bez dodavanja dodatnog koda.
{
: ;
}
{
: ;
}
Svojstvo content je obavezno — bez njega, pseudo-element se ne renderira. Generirani sadržaj je dijete na samom početku (::before) ili kraju (::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) */
}
Ovo je klasična upotreba: crtanje strelica, značaka, preklapanja, dekorativnih linija — čuvajući HTML od čisto vizualnih elemenata.
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 uveo :: da razlikuje pseudo-elemente od pseudo-klasa (preglednici još uvijek prihvaćaju jednu dvotačku na starijima radi kompatibilnosti, ali koriste ::)
Generirani content čitaju neka čitala zaslona — nemojte stavljati bitne informacije samo u ::before/::after (koristite za dekoraciju), a dekorativne ikone je najbolje ostaviti izvan stabla dostupnosti.
Pseudo-elementi vam omogućavaju dodavanje ikona, dekorativnih oblika (strelice, separatori), inicijalnih slova i brojača čisto u CSS-u — bez dodatnih <div> ili <span>.
Oni održavaju semantičku oznaku tijekom omogućavanja bogatih vizualnih detalja, i oni su glavnica čistog, održivog stiliziranja.