Du vil plassere et lite ikon foran en overskrift, men det gir ikke mening å legge til et ekstra HTML-element bare for dekorasjon. Innholdet i HTML-en skal være meningsfullt, ikke visuelt fyll. CSS pseudo-elements løser akkurat dette problemet. Med ::before og ::after kan du sette inn innhold foran eller etter et element uten å røre HTML-strukturen. Du kan style disse pseudo-elementene som vanlige elementer, med bakgrunnsbilder, størrelser og marginer.
Hva er CSS pseudo-elements?
Et pseudo-element er et nøkkelord du legger til en selektor for å style en spesifikk del av elementet. I motsetning til vanlige elementer finnes de ikke i HTML-koden din. Nettleseren genererer dem basert på CSS-reglene dine. Du kjenner dem igjen på dobbelt kolon: ::before, ::after, ::first-letter, ::first-line, ::marker og ::selection.
Forskjellen fra pseudo-klasser som :hover og :focus er at pseudo-klasser velger et element i en bestemt tilstand, mens pseudo-elements velger en bestemt del av et element. Du kan kombinere begge på samme selektor.
::before og ::after for dekorativt innhold
De to mest brukte pseudo-elementene er ::before og ::after. Begge krever egenskapen content for å fungere. Content kan inneholde tekst, men den vanligste bruken er å sette verdien til en tom streng og deretter style pseudo-elementet med bakgrunnsbilde, bredde og høyde. Da får du et visuelt element du kan posisjonere fritt.
Slik det vises i videoleksjonen: du markerer et h1-element med h1::before, setter content til en tom streng, gir det display inline-block, og legger på et bakgrunnsbilde med bredde og høyde. Resultatet er et ikon som vises rett foran overskriften, uten at du har lagt til noe i HTML-en. Bytter du til ::after, havner ikonet etter teksten i stedet. Du justerer margin-right eller margin-left for å gi luft mellom ikonet og teksten.
::first-letter og ::first-line for typografi
Med ::first-letter kan du style den første bokstaven i et tekstelement. Klassisk bruk er store initialer i artikler, der første bokstav får en større skriftstørrelse og kanskje en annen farge. Du velger for eksempel alle p-elementer med p::first-letter og gir den ønsket størrelse og farge.
::first-line fungerer på samme måte, men treffer hele den første linjen i et tekstelement. Hva som utgjør "første linje" avhenger av elementets bredde. Smalere vindu betyr kortere linje. Begge pseudo-elementene er nyttige for typografiske detaljer som gir teksten et mer gjennomarbeidet preg.
::marker for listeikoner
Lister i HTML får automatisk kulepunkter eller tall fra nettleseren. Med ::marker kan du style akkurat disse markørene uten å påvirke resten av listeteksten. Du skriver li::marker og endrer farge, størrelse eller innhold. Det er en enkel måte å gi lister visuell egenart uten å overstyre hele listeformateringen.
::selection for markert tekst
Når en bruker markerer tekst med musen, vises den som regel med blå bakgrunn og hvit tekst. Med ::selection kan du overstyre dette og gi markert tekst dine egne farger. Du setter background og color til ønskede verdier. Det er en liten detalj, men den gir nettsiden et mer helhetlig design ned til interaksjonsnivå.
Når bør du bruke pseudo-elements?
Pseudo-elements er riktig valg for rent dekorativt innhold: ikoner, visuelle effekter, typografiske detaljer og hover-animasjoner. De er feil valg for innhold som har betydning. Skjermlesere behandler pseudo-element-innhold ulikt, og tekst i content-egenskapen kan ikke kopieres av brukere i alle nettlesere. Hold meningsfullt innhold i HTML og bruk pseudo-elements kun for visuell pynt.
Pseudo-elements kombineres ofte med bakgrunnsbilder og box-shadow for å bygge avanserte UI-komponenter. Du kan lese mer om alle pseudo-elementene og deres begrensninger i MDN sin dokumentasjon om pseudo-elements.
Lær mer om pseudo-elements med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du:
- Hvordan du bruker ::before og ::after til å legge til ikoner og dekorasjon uten ekstra HTML
- Hvordan ::first-letter, ::first-line, ::marker og ::selection gir deg typografisk kontroll
- Praktiske eksempler på pseudo-elements i kombinasjon med bakgrunnsbilder og posisjonering
