template

Para poner un subrayado de otro color cuando el mouse pasa sobre un link, se puede solucionar con un borde. En este caso el borde va en a:hover . No olvides que al poner el borde no es necesario un subrayado (underline).

Si te gustan los enlaces (a) con subrayado, sustituye none por underline.

a {
color: #bc1c2d;

text-decoration: none;

}

a:hover {
color: #333;

text-decoration: none;

border-bottom: 2px solid #41aadc;
}

Abajo una imagen que muestra más o menos como se vería el código CSS.

Primero está el enlace y después el enlace cuando el mouse pasa sobre él.

Si quieres cambiar el grosor del borde modifica lo que está en rojo, a continuación:

a:hover {
color: #333;

text-decoration: none;

border-bottom: 2px solid #41aadc;
}

Por ejemplo, si quieres el borde más delgado pon 1px