如何在悬停时制作虚线下划线链接？

Question

I have a link <a class="link-articles" href="#articles">My Articles</a>

and my css .link-articles { text-decoration: underline; color: blue; } .link-articles { text-decoration: underline; color: blue; }

However, on hover I would like to have instead of blue underline a red underline, but the text should remain blue and only the underscore change color to red.

How to do such thing?

Answer 1

Since you cannot denotewhich colora second color for the text underline, one strategy is to remove it and use a border.

.link-articles
{
    border-bottom: solid 1px blue;
    text-decoration: none;
}

.link-articles:hover
{
    border-bottom-color: red;
}

Note that if you leave the text-underline , it will shift down when hovering, since it's placement is not exactly the same location as the bottom border.

This approach has an added advantage of being able to position the underline by using line-height and have alternate line styles, by replacing solid with dotted or dashed .

Borderless Approach:

As @Pacerier points out in the comments, here is an alternate strategy using pseudo-classes and CSS content ( JSFiddle ):

.link-articles
{
    position: relative;
}

.link-articles[href="#articles"]:after
{
    content: 'My Articles';
}

.link-articles:after
{
    color: red;
    left: 0;
    position: absolute;
    top: 0;
}

However, with anti-aliasing, it may have some color-blending on the text edges. If you don't like the thought of having to manually put content in your CSS, you could use an attribute or duplicate element.

Answer 2

Use border-bottom :

a:hover.link-articles {border-bottom: 1px dotted red; text-decoration: none;}

See the demo

Answer 3

Use a border:

.link-articles { text-decoration: none; border-bottom: blue 1px solid; }
.link-articles:hover { border-bottom: red 1px dotted; }

Answer 4

Just do:

a:hover {
  text-decoration-style: dotted
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

Answer 5

Demo Fiddle

.link-articles { text-decoration: none; border-bottom: 1px dotted blue; }
.link-articles:hover { text-decoration: none; border-bottom: 1px dotted red; }

Answer 6

Try this:

 .link-articles{ text-decoration: none; border-bottom:1px dotted; border-color:blue; }
 .link-articles:hover{ border-color:red; }

DEMO

Answer 7

Show bottom border on hover:

a.link-articles {
    text-decoration: none;
    border-bottom: 1px dotted blue;
}
a.link-articles:hover {
    border-bottom: 1px dotted red;
}

Answer 8

The :hover style is used to set style when user places mouse over element.

.link-articles       { ... }
.link-articles:hover { ... }

And you can use the border-bottom property instead of text-decoration for dotted, dashed and width styling.

Answer 9

You can use the CSS3 text-decoration-color property, but unfortunatly, the text-decoration-color property is not supported in any of the major browsers.

Firefox supports an alternative, the -moz-text-decoration-color property.

Reference: http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

Browser Support: http://caniuse.com/#search=text-decoration-color

JSFiddle (Doesn't works on all browsers)

So the best way to do that is still to use the border-bottom css property as a trick.