Sublinhado de link de outra cor

Para sublinhar um link quando passamos o mouse em cima dele, utilizamos a propriedade text-decoration: underline;

Só que, por padrão, a cor do sublinhado fica da mesma cor do link.

Para alterar a cor do link devemos utilizar um truque com border-bottom.



a {
	color: blue;
	text-decoration: none;
}

a:hover {
	border-bottom: 1px solid red;
}

Exemplo:

Passe o mouse aqui no link .