Hur man ändrar HTML-länk understryker på en webbsida

Den här artikeln förklarar flera sätt du kan använda CSS för att ändra standardutseendet på textlänkar på din webbsida genom att ta bort understrykningen, ändra den till en prickad linje eller ändra dess färg. Ytterligare information ingår för att ändra understrykningen till en streckad linje eller dubbla understrykningar.

Hur man tar bort understruken på textlänkar

Som standard har webbläsare vissa CSS-stilar att de gäller specifika HTML-element. Om du inte skriver över dessa standardvärden med webbplatsens egna stilark, gäller standardvärdena. För hyperlänkar, standardvisningsstil är att länkad text är blå och understruken. Om du vill kan du ändra utseendet på dessa understrykningar eller ta bort dem helt från din webbsida.

För att ta bort understrykningen från textlänkar använder du CSS-egenskapens textdekoration. Här är CSS du skriver för att göra detta:

a {text-dekoration: ingen; }

Med den ena raden av CSS tar du bort understrykningen från alla textlänkar på din webbsida. Även om detta är en mycket allmän stil (den använder en elementväljare), har den fortfarande mer specificitet än standardwebbläsarstilarna. Eftersom dessa standardstilar är det som skapar understrykningen till att börja med, det är vad du behöver skriva över.

En varning för att ta bort understrykningar

Visuellt kan borttagning av understrykningar vara exakt vad du vill åstadkomma, men du bör vara försiktig när du gör det också. Oavsett om du gillar utseendet på understrukna länkar eller inte, kan du inte argumentera för att de gör det uppenbart om vilken text som är länkad och vilken inte. Om du tar bort understrykningar eller ändrar den blå blå länkfärgen bör du se till att du ersätter dem med stilar som fortfarande gör att länkad text sticker ut. Detta ger en mer intuitiv upplevelse för besökarna på din webbplats.

Understryk inte icke-länkar

En annan försiktighet när det gäller länkar och understrykningar, understryka inte text som inte är en länk som ett sätt att betona den. Människor har förväntat sig att understruken text ska vara en länk, så om du understryker innehåll för att lägga till betoning (istället för att göra den fet eller kursiv), skickar du fel meddelande och kommer att förvirra webbplatsen användare.

Hur man ändrar understrykningen till prickar eller bindestreck

Om du vill behålla din textlänk understruken men ändra stilen för den understruken från standardutseendet, som är en "solid" linje, kan du också göra det. Istället för den heldragna linjen kan du använda prickar för att understryka dina länkar. För att göra detta tar du fortfarande bort understrykningen, men du ersätter den med egenskapen border-bottom style:

a {text-dekoration: ingen; border-bottom: 1px prickad; }

Eftersom du har tagit bort standardstreck är den prickade den enda som visas.

Du kan göra samma sak för att få streck. Bara ändra gräns-botten stil till streckad:

a {text-dekoration: ingen; border-bottom: 1px streckad; }

Hur man ändrar den understrukna färgen

Ett annat sätt att uppmärksamma dina länkar är att ändra färgen på understrykningen. Se bara till att färgen passar din färgschema.

a {text-dekoration: ingen; kant-botten: 1 pixlar fast rött; }

Dubbel understrykning

Tricket med att använda dubbla understrykningar är att du måste ändra bredden på gränsen. Om du skapar en 1px bred kant får du en dubbel understrykning som ser ut som en enda understrykning.

a {text-dekoration: ingen; border-bottom: 3px dubbel; }

Du kan också använda den befintliga understrykningen för att göra en dubbel understrykning med andra funktioner, till exempel en av linjerna som prickas:

en {border-bottom: 1px dubbel; }

Glöm inte länkstaterna

Du kan lägga till stilen längst ner till dina länkar i olika tillstånd, såsom: sväva,: aktiv eller: besökt. Detta kan skapa en trevlig "rollover" -stilupplevelse för besökare när du använder den "sväva" pseudoklassen. För att få en andra prickad understrykning att visas när du svävar över länken:

a {text-dekoration: ingen; }
a: sväva {border-bottom: 1px prickad; }