Demo Fiddle

Question

我有一个链接<a class="link-articles" href="#articles">My Articles</a>

和我的css .link-articles { text-decoration: underline; color: blue; }

然而，在悬停时我想用蓝色下划线加一个红色下划线，但文字应保持蓝色，只有下划线会将颜色变为红色。

怎么做这样的事情？

Answer 1

由于您不能将~~哪种颜色~~表示为文本下划线的第二种颜色，因此一种策略是删除它并使用边框。

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

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

请注意，如果您离开text-underline，它会在悬停时向下移动，因为它的位置与底部边框的位置不完全相同。

此方法的另一个优势是，通过使用line-height替换solid或dotted，可以使用dashed和使用替换线样式<下划线>定位下划线.link-articles { position: relative; } .link-articles[href="#articles"]:after { content: 'My Articles'; } .link-articles:after { color: red; left: 0; position: absolute; top: 0; }。

无边界方法：

正如@Pacerier在评论中指出的，这是使用伪类和CSS内容（JSFiddle）的替代策略：

content

但是，使用消除锯齿功能时，文本边缘可能会有一些颜色混合。如果您不喜欢必须手动将{{1}}放入CSS中，则可以使用属性或重复元素。

Answer 2

使用border-bottom：

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

See the demo

Answer 3

使用边框：

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

Answer 4

Demo Fiddle

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

Answer 5

试试这个：

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

DEMO

Answer 6

在悬停时显示底部边框：

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

Answer 7

只需：

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

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

Answer 8

当用户将鼠标放在元素上时，:hover样式用于设置样式。

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

您可以使用border-bottom属性代替text-decoration进行虚线，虚线和宽度样式。

Answer 9

您可以使用CSS3 text-decoration-color属性，但不幸的是，任何主要浏览器都不支持text-decoration-color属性。

Firefox支持另一种选择，-moz-text-decoration-color属性。

参考：http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

浏览器支持：http://caniuse.com/#search=text-decoration-color

JSFiddle（不适用于所有浏览器）

所以最好的方法是使用border-bottom css属性作为技巧。

如何在悬停时创建虚线下划线链接？

9 个答案:

Demo Fiddle