Come fare per ..

Impostare la doppia sottolineatura ai link

I collegamenti ipertestuali di norma sono evidenziati con una sottolineatura. Quindi il web designer li personalizza modificando il colore, la dimensione oppure la sottolineatura; raramente riesce ad impostare una doppia sottolineatura. Non perché sia impossibile, me perché spesso porta a dover mettere in pratica accorgimenti che necessitano di un po' di tempo per studiarli.
Con i CSS, però, gran parte del lavoro viene svolto in pochissimo tempo.

In HTML il testo può essere sottolineato una volta sola, ma il testo come tutti gli elementi, sia in linea che in blocco, può avere un bordo, eventualmente su un solo lato.
Allora possiamo ipotizzare che ai link venga dato un bordo inferiore, uno o due pixel sotto l'elemento, eventualmente anche di tipo e colore diverso, ma stilisticamente è meglio che sia dello stesso formato della sottolineatura standard.

Gli attributi chiave sono il padding per la spaziatura e il border per la linea.
Scriviamo quindi il nostro CSS, definendo una classe doppia che applicheremo ai link.
Come gran parte dei link di questo sito, visualizzeremo la sottolineatura solo al passaggio del mouse.

[CSS] a.doppia {    color:#0000b0;    font-weight: bold;    text-decoration: none;    padding-bottom: 1px; } a.doppia:hover {    color:#0050f0;    font-weight: bold;    text-decoration: underline;    border-bottom: solid 1px #0050f0; } a.doppia:visited {    color:#0000b0;    font-weight: bold;    text-decoration: none; }

[HTML] <a href="#" class="doppia">Il nostro LINK</a>

Come vediamo questa è una soluzione estremamente semplice che non fa uso di librerie esterne e possiamo metterla in pratica davvero con poche righe di codice nel nostro CSS, e richiamando la classe doppia possiamo applicarla a tutti i nostri link.

Questo sotto è il risultato del nostro esperimento

Link con doppia sottolineatura Passa col mouse sopra al link sottostante Il nostro LINK