En pseudo-element (dubbelkolon ::) stil en specifik del av ett element, eller genererar innehål som inte är i HTML — utan att lägga till extra markup.
::before och ::after — genererat innehål
css
{
: ;
}
{
: ;
}
En pseudo-element (dubbelkolon ::) stil en specifik del av ett element, eller genererar innehål som inte är i HTML — utan att lägga till extra markup.
{
: ;
}
{
: ;
}
Egenskapen content är obligatorisk — utan den återges inte pseudo-elementet. Det genererade innehållet är ett barn helt i början (::before) eller slutet (::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) */
}
Detta är den klassiska användningen: ritning av pilar, märken, överlagringar, dekorativa linjer — håller HTML:en ren från rent visuella element.
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 introducerade :: för att särskilja pseudo-element från pseudo-klasser (webbläsare accepterar fortfarande enkelt kolon på de gamla för kompatibilitet, men använder ::.
Genererat content läses av vissa skärmläsare — lägg inte viktig information bara i ::before/::after (använd det för dekoration), och dekorativa ikoner är bäst att lämna utanför tillgänglighetsträdet.
Pseudo-element låter dig lägga till ikoner, dekorativa former (pilar, avgränsare), initialer och räknare rent i CSS — inga extra <div>-ar eller <span>-ar.
De behåller semantisk markup medan de möjliggör rik visuell detalj, och de är en grund för ren, underhållig styling.