Pseudo-element är en kraftfull teknik i CSS som låter dig lägga till innehåll eller styling till element utan att ändra den underliggande HTML-koden.
Typer av pseudo-element:
- ::before - Lägger till innehåll eller styling före elementet.
- ::after - Lägger till innehåll eller styling efter elementet.
- ::first-letter - Stylar den första bokstaven i ett element.
- ::first-line - Stylar den första raden i ett element.
Syntax:
element::pseudo-element { CSS-egenskaper }
Exempel:
Lägg till en ikon före ett <a>-element:
a::before {
content: "👉";
font-size: 1.5em;
}
Tillgänglighet:
Pseudo-element kan användas för att förbättra tillgängligheten genom att:
- Lägga till beskrivande text med
::before eller ::after.
- Skapa visuella markörer med
::first-letter eller ::first-line för personer med nedsatt syn.
Tips:
- Använd pseudo-element sparsamt för att undvika att röra till koden.
- Testa din kod i olika webbläsare för att säkerställa kompatibilitet.
- Överdriv inte användningen, eftersom det kan påverka webbplatsens prestanda.