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

我有一个链接

和我的css

.link文章{文本装饰：下划线；颜色：蓝色；}

然而，在悬停状态下，我想用红色下划线代替蓝色下划线，但是文本应该保持蓝色，只有下划线的颜色变为红色

如何进行此操作？

使用边框：

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

---

使用

边框底部

：

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

试试这个：

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

---

当用户将鼠标放在元素上时，

：hover

样式用于设置样式

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

---

对于虚线、虚线和宽度样式，您可以使用

边框底部

属性而不是

文本装饰。
悬停时显示底部边框：

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

由于您无法指示文本下划线的第二种颜色，因此一种策略是删除它并使用边框

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

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

请注意，如果保留
文本下划线
，则在悬停时它将向下移动，因为它的位置与底部边框的位置不完全相同

这种方法的另一个优点是，可以通过使用
线高度来定位下划线，并通过将
实线
替换为
虚线
或
虚线
来使用替代线样式

无边界方法：

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

但是，使用抗锯齿时，文本边缘可能会有一些颜色混合。如果您不喜欢在CSS中手动放置
内容
，可以使用属性或重复元素。

您可以使用CSS3
文本装饰颜色
属性，但不幸的是，任何主要浏览器都不支持
文本装饰颜色
属性

Firefox支持另一种选择，即
-moz文本装饰颜色
属性

参考：

浏览器支持：

（不适用于所有浏览器）

因此，最好的方法仍然是使用
border-bottom
css属性作为技巧。
只需执行以下操作：

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

这种方法的缺点是，当鼠标悬停时，下划线将向下“移动”。jsfiddle.net/4dKFuI通过透明的底部边框解决了这个问题。我们可以指定文本下划线的颜色，因为它将与文本的颜色相同。要使字体和下划线具有两种不同的颜色，我们需要在其上方覆盖一个新文本，以便旧文本颜色被新文本颜色覆盖。感谢您的澄清，@Pacerier。我已经更新了我的答案，加入了使用文本覆盖的方法。就我个人而言，我喜欢边框方法，因为您可以使用
线高
，并使用不同的边框样式，如
虚线
，来微调它的位置。如何使用
线高
来精确控制线的位置？在Safari中进行测试时，行与文本的距离不受影响。行高大于周围文本只会增加到下一行的空间。较小的线高度完全没有影响。边框与文本的距离永远不会改变。也许它可以在其他浏览器中使用，但它只在内部网等受控环境中有用。@OttoG您完全正确。这是我的一个错误，我为任何混淆道歉。
行高
属性与下划线无关。一个
padding-bottom
属性可能会有所帮助，但我将从答案中删除该措辞，这样就不会有人怀疑了。谢谢你向我指出这一点。@OttoG仔细想想，我认为
行高
属性确实有效，但前提是链接的
显示
设置为
内联块
。不管怎么说，这有点让人困惑，并且不会增加OP的答案，所以我现在将省略它。
.link-articles { text-decoration: none; border-bottom: 1px dotted blue; }
.link-articles:hover { text-decoration: none; border-bottom: 1px dotted red; }

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