Knappene på nettsiden din har en understrek som får dem til å se ut som vanlige lenker, og du vil fjerne den. Eller kanskje du vil legge til en dekorativ linje under en overskrift for visuell effekt. Med text-decoration i CSS styrer du linjer på tekst: understreking, gjennomstreking, overlinje og mer. Egenskapen text-transform lar deg i tillegg kontrollere om teksten vises med store eller små bokstaver, uavhengig av hva som står i HTML-koden.
Text-decoration CSS: legg til og fjern linjer
Egenskapen text-decoration legger til dekorative linjer på tekst. Den vanligste bruken er underline, som gir en strek under teksten. Men du har flere alternativer: overline legger en linje over teksten, line-through gir gjennomstreking, og none fjerner alle linjer. Lenker i HTML har understreking som standard, og text-decoration: none er måten du fjerner den på.
Et poeng fra videoleksjonen: vær forsiktig med å bruke understreking på tekst som ikke er klikkbar. Brukere på nett er vant til at understreket tekst betyr lenke. Legger du understreking på vanlig tekst, skaper du forvirring. Bruk det bevisst og med god grunn.
Shorthand og langformat
Du kan skrive text-decoration i et kompakt shorthand-format der du angir linjetype, tykkelse, stil og farge i en og samme deklarasjon. Rekkefølgen er: underline 3px solid white. Dette gir en tre piksler tykk, heltrukken hvit understreking. Alternativt kan du bruke langformat med separate egenskaper: text-decoration-line, text-decoration-thickness, text-decoration-style og text-decoration-color. Resultatet blir det samme, men langformatet gjør det enklere å endre en enkelt egenskap uten å skrive om hele linjen.
Ulike linjestiler du kan bruke
Text-decoration-style bestemmer utseendet på linjen. Du har fem alternativer:
- solid gir en vanlig heltrukken linje
- dashed gir en stiplet linje
- dotted gir en prikket linje
- double gir en dobbel linje
- wavy gir en bølget linje
Kombinert med text-decoration-color kan du skape linjer som skiller seg fra tekstfargen. En rød bølget understrek under et ord kan for eksempel markere en stavefeil i et brukergrensesnitt. En grønn dobbel linje kan markere noe positivt. Mulighetene er mange, men bruk dem med måte for å holde designet ryddig.
Fjern understreking fra lenker og knapper
En av de vanligste bruksområdene for text-decoration er å fjerne standardunderstrekingen fra lenker. Spesielt knapper som er bygget med a-elementer ser bedre ut uten den blå understreken. Du setter text-decoration: none på elementet, og linjen forsvinner. I videoen vises dette på en knapp der understrekingen fjernes, fordi knappens form og bakgrunnsfarge allerede kommuniserer at elementet er klikkbart. Kombiner gjerne med transition i CSS for å legge til understreking som en jevn hover-effekt.
Text-transform: styr store og små bokstaver
Egenskapen text-transform endrer hvordan tekst vises uten å endre selve HTML-koden. uppercase gjør alle bokstaver til store bokstaver, lowercase gjør alle til små, og capitalize gir stor forbokstav i hvert ord. Verdien none fjerner eventuell transformasjon som er satt av en annen regel.
Fordelen med å bruke text-transform i stedet for å skrive store bokstaver direkte i HTML er fleksibilitet. Bestemmer du deg for å endre knappeteksten fra store til vanlige bokstaver, endrer du det i CSS-filen. Du slipper å redigere HTML-teksten på tvers av alle sidene. I tillegg leser skjermlesere tekst som er gjort uppercase med CSS som vanlig tekst, mens tekst skrevet med store bokstaver i HTML kan bli bokstavert.
Kombiner text-decoration med selektorer
Med CSS-selektorer kan du style understreking ulikt for ulike elementer. Du kan fjerne understreking på navigasjonslenker men beholde den i brødtekst. Du kan gi pseudo-elementer egne dekorative linjer. Med CSS-variabler kan du definere dekorasjonsfarge ett sted og gjenbruke den gjennom hele stilarket. Les mer om alle tilgjengelige verdier i MDN sin dokumentasjon om text-decoration.
Lær mer om text-decoration med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I videoen får du se hvordan du:
- Legger til og tilpasser dekorative linjer med shorthand og langformat
- Fjerner understreking fra knapper med text-decoration: none
- Bruker text-transform til å styre store og små bokstaver uavhengig av HTML-innholdet
