下划线和字体的不同颜色[重复]

Question

有没有办法为文本下划线和文本本身制作不同的颜色？

在大多数浏览器上，text-decoration-color 似乎是 not available。那么还有其他方法吗？

Answer 1

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

看看下面的sn-p：

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>

希望这会有所帮助！