Come modificare le sottolineature dei collegamenti HTML su una pagina Web

Questo articolo spiega diversi modi in cui puoi utilizzare i CSS per modificare l'aspetto predefinito dei collegamenti di testo sulla tua pagina web rimuovendo la sottolineatura, trasformandola in una linea punteggiata o cambiandone il colore. Sono incluse ulteriori informazioni per modificare la sottolineatura in una linea tratteggiata o doppia sottolineatura.

Come rimuovere la sottolineatura sui collegamenti di testo

Per impostazione predefinita, i browser Web hanno determinate Stili CSS che si applicano a specifici elementi HTML. Se non sovrascrivi queste impostazioni predefinite con i fogli di stile del tuo sito, verranno applicate le impostazioni predefinite. Per

collegamenti ipertestuali, lo stile di visualizzazione predefinito prevede che il testo collegato sia blu e sottolineato. Se lo desideri, puoi modificare l'aspetto di quelle sottolineature o rimuoverle completamente dalla tua pagina web.

Per rimuovere le sottolineature dai collegamenti testuali, si utilizza la proprietà CSS text-decoration. Ecco il CSS che scrivi per farlo:

a { text-decoration: none; }

Con quella riga di CSS, rimuovi la sottolineatura da tutti i collegamenti di testo sulla tua pagina web. Anche se questo è uno stile molto generale (usa un selettore di elementi), ha ancora più specificità rispetto agli stili predefiniti dei browser. Poiché quegli stili predefiniti sono ciò che crea le sottolineature per cominciare, è quello che devi sovrascrivere.

Un'avvertenza sulla rimozione delle sottolineature

Visivamente, la rimozione delle sottolineature potrebbe essere esattamente ciò che vuoi ottenere, ma dovresti essere cauto anche quando lo fai. Che ti piaccia o meno l'aspetto dei collegamenti sottolineati, non puoi sostenere che rendono ovvio quale testo è collegato e quale no. Se rimuovi le sottolineature o modifichi il colore blu predefinito del collegamento, assicurati di sostituirle con stili che consentano comunque al testo collegato di risaltare. Ciò renderà l'esperienza più intuitiva per i visitatori del tuo sito.

Non sottolineare i non link

Un'altra avvertenza su collegamenti e sottolineature, non sottolineare il testo che non è un collegamento per enfatizzarlo. Le persone si aspettano che il testo sottolineato sia un collegamento, quindi se sottolinei il contenuto per aggiungere enfasi (invece di metterlo in grassetto o in corsivo), invii il messaggio sbagliato e confonderai il sito utenti.

Come cambiare la sottolineatura in punti o trattini

Se vuoi mantenere le sottolineature del link di testo, ma cambia lo stile di quella sottolineatura dall'aspetto predefinito, che è una linea "solida", puoi farlo anche tu. Invece di quella linea continua, puoi usare i punti per sottolineare i tuoi collegamenti. Per fare ciò, rimuoverai comunque la sottolineatura, ma la sostituirai con la proprietà di stile bordo inferiore:

a { text-decoration: none; bordo-basso: 1px punteggiato; }

Poiché hai rimosso la sottolineatura standard, quella punteggiata è l'unica che appare.

Puoi fare la stessa cosa per ottenere trattini. Basta cambiare lo stile del bordo inferiore in tratteggiato:

a { text-decoration: none; bordo inferiore: 1px tratteggiato; }

Come cambiare il colore della sottolineatura

Un altro modo per attirare l'attenzione sui tuoi link è cambiare il colore della sottolineatura. Assicurati solo che il colore si adatti al tuo combinazione di colori.

a { text-decoration: none; bordo-basso: 1px rosso fisso; }

Doppie sottolineature

Il trucco per usare le doppie sottolineature è che devi cambiare la larghezza del bordo. Se crei un bordo largo 1 pixel, ti ritroverai con una doppia sottolineatura che assomiglia a una singola sottolineatura.

a { text-decoration: none; bordo-basso: 3px doppio; }

Puoi anche utilizzare la sottolineatura esistente per creare una doppia sottolineatura con altre caratteristiche, come una delle linee tratteggiate:

a { border-bottom: 1px double; }

Non dimenticare gli stati di collegamento

Puoi aggiungere lo stile del bordo inferiore ai tuoi link in diversi stati come :hover, :active o :visited. Questo può creare una bella esperienza in stile "rollover" per i visitatori quando usi quella pseudo-classe "hover". Per far apparire una seconda sottolineatura tratteggiata quando passi con il mouse sopra il link:

a { text-decoration: none; }
a: hover { border-bottom: 1px punteggiato; }