Links con subrayado de distinto color cuando el mouse pasa sobre ellos

Ximena — Thu, 03 Jan 2008 14:28:47 -0300

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

Pon de otro color el subrayado de los links

Ximena — Thu, 03 Jan 2008 14:15:13 -0300

Para cambiar de color el subrayado de los links podemos quitar el subrayado y poner un borde.

a son los links y a:hover los links cuando el mouse pasa sobre ellos.

a {

color: #000;

text-decoration: none;

border-bottom: 1px solid #789c2b;

}

a:hover {

border: none;

}

Con esto el 'subrayado' de los enlaces es de color verde, los enlaces son negros y cuando el mouse pasa sobre ellos el 'subrayado' se quita.

Para cambiar el color de los enlaces cambia lo que está en rojo:

a {

color: #000;

text-decoration: none;

border-bottom: 1px solid #789c2b;

}

Para cambiar el color del 'subrayado' cambia lo que está en rojo:

a {

color: #000;

text-decoration: none;

border-bottom: 1px solid #789c2b;

}