Een pseudo-element (dubbele dubbelepunt ::) geeft stijl aan een specifiek deel van een element, of genereert inhoud die niet in de HTML staat — zonder extra markup toe te voegen.
{
: ;
}
{
: ;
}
De content eigenschap is verplicht — zonder deze wordt het pseudo-element niet weergegeven. De gegenereerde inhoud is een kind helemaal aan het begin (::before) of einde (::after) van het element.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Dit is het klassieke gebruik: pijlen, badges, overlays, decoratieve lijnen tekenen — de HTML schoon houden van puur visuele elementen.
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 introduceerde :: om pseudo-elementen te onderscheiden van pseudo-klassen (browsers accepteren nog steeds enkele dubbelpunt op de oude voor compatibiliteit, maar gebruiken ::.).
Gegenereerde content wordt door sommige schermlezers gelezen — plaats geen essentiële informatie alleen in ::before/::after (gebruik het voor decoratie), en decoratieve pictogrammen kunnen het best uit de toegankelijkheidsboom worden gelaten.
Pseudo-elementen laten je pictogrammen, decoratieve vormen (pijlen, scheidingstekens), initialen en tellers toevoegen — allemaal in zuivere CSS — geen extra <div>s of <span>s.
Ze houden markup semantisch terwijl ze rijke visuele details mogelijk maken, en ze zijn een vast onderdeel van schone, onderhoudbare styling.