Pseudo-elementer i praksis

Hvornår giver pseudo-elementer mening?

Pseudo-elementer er gode, når du vil tilføje visuelle lag uden at ændre HTML:

• dekorative detaljer
• badges og accent-linjer
• baggrundseffekter bag indhold

Brug dem ikke til semantisk indhold, der skal kunne læses af assistive teknologier.

Basisteknik: tænk i lag

Et stabilt mønster er:

1. Giv komponenten position: relative.
2. Lav laget i ::before eller ::after.
3. Styr stacking med z-index og isolation ved behov.

Øvelse: basis-pseudo

Her træner man den helt grundlæggende model med indhold + pseudo-lag.

Øvelse: pseudo som baggrunds-lag i steps

Denne er god som progression: fra simpel effekt til mere robust, kontrolleret lagdeling.

Typiske fejl

• man glemmer content på pseudo-elementet
• pseudo-elementet placeres uden etableret positioning-kontekst
• dekorative lag får for høj z-index og blokerer interaktion