Et pseudo-element (dobbelt kolon ::) formaterer en specifik del af et element eller genererer indhold, der ikke er i HTML — uden at tilføje ekstra markup.
::before og ::after — genereret indhold
css
{
: ;
}
{
: ;
}
Et pseudo-element (dobbelt kolon ::) formaterer en specifik del af et element eller genererer indhold, der ikke er i HTML — uden at tilføje ekstra markup.
{
: ;
}
{
: ;
}
content-egenskaben er obligatorisk — uden den bliver pseudo-elementet ikke rendereret. Det genererede indhold er et barn helt i starten (::before) eller slutningen (::after) af 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 brug: tegning af pile, badges, overlays, dekorative linjer — holder HTML rent for 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 introducerede :: for at skelne pseudo-elementer fra pseudo-klasser (browsere accepterer stadig enkelt kolon på de gamle for kompatibilitet, men brug ::)
Genereret indhold læses af nogle skærmlæsere — placer ikke vigtig information kun i ::before/::after (brug det til dekoration), og dekorative ikoner bliver bedst holdt ude af tilgængeligheds-træet.
Pseudo-elementer lader dig tilføje ikoner, dekorative former (pile, skillelinjer), drop caps og tællere rent i CSS — ingen ekstra <div>s eller <span>s.
De holder markup semantisk, mens de muliggør rigt visuelle detaljer, og de er en hjørnesten i rent, vedligeholdelsesvenligt styling.