下划线的不同颜色然后字体

Question

是否有一种方法可以使文本的下划线进行不同的颜色，然后是文本本身？

似乎大多数浏览器都无法使用text-decoration-color。那么还有其他方法吗？

Answer 1

使用 border-bottom和 text-decoration: none。它似乎与下划线的链接相同。

请查看下面的片段：

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

<a href="#">This is a underlined link</a>

希望这会有所帮助！