Evidenziare i link su blogger con una linea tratteggiata

Su alcuni siti web e su alcuni blog che visito di frequente, i link del menu o quelli all'interno dei testi sono evidenziati non dalla classica underline che appare o scompare al passaggio del mouse, ma da una linea tratteggiata. 

Questa scelta da un tocco di originalità in più alla grafica di un sito web, in cui i link sono troppo spesso marcati da una sottolineatura classica. Ma questo è un parere personale, esistono molti blog che puntano sui contenuti, più che sull'aspetto grafico, riscuotendo un enorme successo.

Sono sempre stato incuriosito da questo tipo di visualizzazione dei link, per la sua originalità e ho spesso tentato di inserirla nel template, ma senza riuscirci. Questo perché tentavo di inserirla tramite la proprietà CSS "text-decoration" che definisce la formttazione del testo. Questa proprietà può avere diversi valori:

text-decoration: none;		nessuna formattazione
text-decoration: underline;		testo sottolineato
text-decoration: line through;		testo barrato
text-decoration: blink;		testo a intermittenza
text-decoration: overline;		testo soprallineato

e tra questi non ce n'è uno che definisce il testo sottolineato con una linea tratteggiata, che in genere nel linguaggio html viene chiamata "dashed".

Il trucco sta nel non usare questa proprietà, ma un'altra: border.

Per inserire la linea tratteggiata sotto (o sopra) i link su blogger, dobbiamo modificare il codice html del template, quindi andiamo dal pannello di controllo "Layout" alla voce "Modifica HTML" e cerchiamo le righr di CSS che definiscono le proprietà dei link, che dovrebbero essere simili a queste:

a {
color: #fff;
text-decoration: underline;
}
a:visited {
color: #fff;
}
a:hover {
text-decoration: underline;
color: #fff;
}

Può essere che i valori siano differenti, perché ognuno imposta il colore che preferisce per i link, dal pannello di controllo "Layout" alla voce "Caratteri e Colori", ma la "a" iniziale significa che quelle sono le proprietà dei link.

Se modifichiamo queste righe inserendo la proprietà border-bottom, e modificando la "text-decoration" in "none", in questo modo:

a {
color: #fff;
text-decoration: none;
border-bottom: dashed 1px #fff;
}
a:visited {
color: #fff;
}
a:hover {
text-decoration: none;
border-bottom: dashed 1px #fff;
color: #fff;
}

i link saranno sottolineati con una linea tratteggiata.

Se vogliamo invece che la linea stia sopra i link sostituiamo "border-top" a "border-bottom".

In questo modo la linea sarà visibile sempre. Se vogliamo invece che la linea appaia solo al passaggio del mouse, dobbiamo inserire il border solo nelle ultime righe (a.hover): in questo modo:
 

a {
color: #fff;
text-decoration: none;
border-bottom: none;
}
a:visited {
color: #fff;
}
a:hover {
text-decoration: none;
border-bottom: dashed 1px #fff;
color: #fff;
}

se vogliamo invece che sia visibile inizialmente ma scompaia al passaggio del mouse dobbiamo inserire il border solo nelle righe iniziali (.a):

a {
color: #fff;
text-decoration: none;
border-bottom: dashed 1px #fff;
}
a:visited {
color: #fff;
}
a:hover {
text-decoration: none;
border-bottom: none;
color: #fff;
}


I vari "color" possono essere modificati a nostro piacimento, ricordandoci di inserire il cancelletto "#" prima del valore. Un elenco di colori con i rispettivi valori, e un picker utilissimo per trovare il colore che vogliamo, lo potete trovare su http://html-color-codes.info/.