Hvordan endre HTML Link Understreker på en webside

Denne artikkelen forklarer flere måter du kan bruke CSS til å endre standardutseendet på tekstlenker på websiden din ved å fjerne understrekingen, endre den til en stiplet linje eller endre fargen. Ytterligere informasjon er inkludert for å endre understrekingen til en stiplet linje eller dobbel understreking.

Hvordan fjerne understrekingen på tekstlenker

Som standard har nettlesere visse CSS-stiler at de gjelder bestemte HTML-elementer. Hvis du ikke overskriver disse standardene med nettstedets egne stilark, gjelder standardinnstillingene. Til hyperkoblingerer standard visningsstil at koblet tekst er blå og understreket. Hvis du vil, kan du endre utseendet til disse understrekningene eller fjerne dem helt fra websiden din.

For å fjerne understrekningene fra tekstlenker, bruker du CSS-egenskapens tekstdekorasjon. Her er CSS du skriver for å gjøre dette:

a {tekstdekorasjon: ingen; }

Med den ene linjen med CSS fjerner du understrekingen fra alle tekstlenker på websiden din. Selv om dette er en veldig generell stil (den bruker en elementvelger), har den fortsatt mer spesifisitet enn standard nettleserstiler. Fordi disse standardstilene er det som skaper understrekningene til å begynne med, det er det du trenger å overskrive.

En advarsel om å fjerne understreker

Visuelt kan fjerning av understrekninger være akkurat det du vil oppnå, men du bør være forsiktig når du gjør dette også. Enten du liker utseendet på understrekede lenker eller ikke, kan du ikke argumentere for at de gjør det klart for hvilken tekst som er koblet og ikke. Hvis du tar bort understrekninger eller endrer den standard blå koblingsfargen, bør du sørge for å erstatte dem med stiler som fremdeles lar koblet tekst skille seg ut. Dette vil gi en mer intuitiv opplevelse for besøkende på nettstedet.

Ikke understrek ikke-koblinger

En annen advarsel om lenker og understreker, ikke understreke tekst som ikke er en lenke som en måte å understreke den på. Folk har forventet at understreket tekst skal være en lenke, så hvis du understreker innhold for å legge til vekt (i stedet for å gjøre den fet eller kursiv), sender du feil melding og vil forvirre nettstedet brukere.

Slik endrer du understrekingen til prikker eller bindestreker

Hvis du vil holde tekstkoblingen understreket, men endre stilen til den understreken fra standardutseendet, som er en "solid" linje, kan du også gjøre dette. I stedet for den solide linjen kan du bruke prikker for å understreke linkene dine. For å gjøre dette vil du fortsatt fjerne understrekingen, men du vil erstatte den med egenskapen border-bottom style:

a {tekstdekorasjon: ingen; kantbunn: 1 piks stiplet; }

Siden du har fjernet standard understreking, er den prikkete den eneste som vises.

Du kan gjøre det samme for å få bindestreker. Bare endre stilen til kant-bunn til stiplet:

a {tekstdekorasjon: ingen; border-bottom: 1px stiplet; }

Hvordan endre understreket farge

En annen måte å gjøre oppmerksom på linkene dine er å endre fargen på understrekingen. Bare vær sikker på at fargen passer med din fargevalg.

a {tekstdekorasjon: ingen; kantbunn: 1 piks rødt rødt; }

Dobbel understreking

Trikset med å bruke doble understrekninger er at du må endre bredden på grensen. Hvis du oppretter en 1px bred kant, vil du ende opp med en dobbel understreking som ser ut som en enkelt understreking.

a {tekstdekorasjon: ingen; kantbunn: 3 px dobbelt; }

Du kan også bruke den eksisterende understrekingen for å lage en dobbel understreking med andre funksjoner, for eksempel en av linjene som er stiplet:

a {border-bottom: 1px double; }

Ikke glem koblingsstatene

Du kan legge til bunnstilen på kantene dine i forskjellige tilstander, for eksempel: hover,: aktiv eller: besøkt. Dette kan skape en fin "rollover" -stilopplevelse for besøkende når du bruker den "svevende" pseudoklassen. For å få en annen stiplet understreking til å vises når du holder markøren over lenken:

a {tekstdekorasjon: ingen; }
a: sveve {border-bottom: 1px stiplet; }