Et pseudo-element (dobbel kolon ::) stiler en spesifikk del av et element, eller genererer innhold som ikke er i HTML-en — uten å legge til ekstra markup.
::before og ::after — generert innhold
css
{
: ;
}
{
: ;
}
Et pseudo-element (dobbel kolon ::) stiler en spesifikk del av et element, eller genererer innhold som ikke er i HTML-en — uten å legge til ekstra markup.
{
: ;
}
{
: ;
}
content egenskapen er obligatorisk — uten den blir pseudo-elementet ikke renderert. Det genererte innholdet er et barn helt på starten (::before) eller slutten (::after) av elementet.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Dette er den klassiske bruken: tegne piler, badges, overlays, dekorative linjer — holder HTML ren fra rent visuelle elementer.
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 introduserte :: for å skille pseudo-elementer fra pseudo-klasser (nettlesere aksepterer fortsatt enkelt kolon på de gamle for kompatibilitet, men bruk ::).
Generert content blir lest av noen skjermlesere — ikke legg viktig informasjon bare i ::before/::after (bruk det til dekorasjon), og dekorative ikoner er best uten for tilgjengelighetstreet.
Pseudo-elementer lar deg legge til ikoner, dekorative former (piler, skilletegn), initialer og tellere rent i CSS — ingen ekstra <div>s eller <span>s.
De holder markup semantisk samtidig som de muliggjør rik visuell detalj, og de er et grunnleggende element i ren, vedlikeholdbar styling.