Testo e sottolineatura di colore diversi in un link

Un effetto simpatico da poter dare ad un link è quello di poter assegnare alla pseudoclasse :hover un colore al testo ed un colore al bordo, differenti. Abbiamo sempre scritto un codice come il seguente:

a:link, a:visited{
color:#666;
text-decoration: none;
}
 
a:hover, a:focus, a:active{
color:#222;
text-decoration: underline;
 }

In questo caso il colore del bordo (sottolineatura) sullo stato :hover è uguale all'esadecimale dato al colore del testo, vale a dire #222 (molto simile al nero).

Se, invece, vogliamo ottenere un effetto come quello descritto nel titolo, dovremmo procedere nel seguente modo:

a:link, a:visited{
color:#62C83A;
background:#fff;
text-decoration: none;
 }

a:hover, a:focus, a:active{
color:#222;
text-decoration: none;
border-bottom: 3px solid #f40;
 }
  

Cosa cambia dal primo blocco di codice? In pratica è stata annullata la sottolineatura (text-decoration: none) ed è stato assegnato un bordo alto 3 pixel, di colore rosso. Una semplice pagina di esempio mostra quanto appena descritto.
Alla prossima.