How can I change the color of a mouse hover underline using CSS?

Question

How can I change the color of the underline only, when the use mouse hovers a string?

Here is the site, in the right corner u will see the menu.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color + `:hover` — Valerij, Apr 24 '14 at 12:21
I tried this .example { text-decoration: underline; text-decoration-color: red; } but the string color is changing also ... — zan, Apr 24 '14 at 12:23
@user3503874 Try this solution http://jsfiddle.net/5CUWs/ with border bottom — Vangel Tzo, Apr 24 '14 at 12:28

score 2 · Answer 1 · answered Apr 24 '14 at 12:34

text-decoration-color is only supported by Mozilla.

What I would suggest is use

1) border-bottom

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

OR

2) background image in CSS.

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

Make the image suiting your need. And position the background image to bottom. And rest of the color can #FFF.

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

You can use three methods:

Using text-decoration-color.

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

Using two DOM elements!

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

Using a border-bottom:

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

All the three methods give the same output. Colour with a blue and line with a green!

Also, along with the above methods, there are a lot: Crafting link underlines. Thanks to srekoble.

edited May 23 '17 at 10:32

Community

1
1

answered Apr 24 '14 at 12:27

Praveen Kumar Purushothaman

164,888
24
203
252

1

There more than 3 ways, for example gradient have a look at this great article https://medium.com/designing-medium/7c03a9274f9 – Vangel Tzo Apr 24 '14 at 12:40

score 1 · Answer 3 · answered Apr 24 '14 at 12:29

Try this

<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>

score 0 · Answer 4 · answered Apr 24 '14 at 12:31

0

you can change it simply by adding

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

answered Apr 24 '14 at 12:31

shakhrillo

37
5

score 0 · Answer 5 · answered Apr 24 '14 at 12:33

0

I hope it's more easy to add a color of a border-bottom.

Try it

answered Apr 24 '14 at 12:33

Luiggi

358
4
12

How can I change the color of a mouse hover underline using CSS?

5 Answers5