Как изменить цвет подчеркивания при наведении мыши с помощью CSS?

Попробуй это

<style type="text/css" media="screen" />
a {
text-decoration: none;
}
a:link {
color: #0000FF;
border-bottom: 1px solid #0000FF;
}
a:visited {
color: #0000FF;
border-bottom: 1px solid #C0C0C0;
}
a:active {
color: #FF0000;
border-bottom: 1px solid #FF0000;
}
a:hover {
color: #000000;
border-bottom: 2px solid #DD0000;
}
</style>
<a href="http://www.google.com/">Hover this link to view the color change</a>

text-decoration-color поддерживается только Mozilla.

Я бы предложил использовать

1) нижняя граница

a:hover
{
text-decoration: none;
border-bottom: 1px solid blue;
}

ИЛИ

2) фоновое изображение в CSS.

a:hover
{
    text-decoration: none;
    background: url('image.jpg') #FFF repeat-x;
}

Сделайте изображение, соответствующее вашим потребностям. И расположите фоновое изображение внизу. А остальные цвета могут #FFF.

вы можете изменить его, просто добавив

a:hover{
    text-decoration:underline;
    border-bottom: 0px solid blue;
}

Я надеюсь, что проще добавить цвет нижней границы.

Попытайся

Вы можете использовать три метода:

1. Используя text-decoration-color.

   a:hover {text-decoration-color: green; color: blue;}
   

2. Использование двух элементов DOM!

   a:hover {color: green; text-decoration: underline;}
   a:hover span {color: blue;}
   

3. Использование border-bottom:

   a:hover {border-bottom: 1px solid green; color: blue;}
   

Все три метода дают одинаковый результат. Раскрашиваем синим, а линию зеленым!

Также, наряду с вышеперечисленными способами, существует множество: Создание подчеркивания ссылки. Спасибо srekoble.