使用 CSS 自定义文本下划线颜色

在网页设计中，为文本添加下划线是强调或突出显示信息的常见做法。但是，如果您想通过更改下划线的颜色来添加独特的触感该怎么办？这可能吗？

是的，可以使用 CSS 更改文本下方线条的颜色。您可以使用以下两种方法：

方法 1：使用 text-decoration-color

最直接的方法是使用 text-decoration-color 属性。此属性指定下划线的颜色，允许您独立于文本颜色对其进行自定义。

例如，要创建带有蓝色下划线的红色文本，您可以使用以下 CSS：

text-decoration-color: blue;

方法 2：使用 border-bottom

另一种方法是使用 border-bottom 属性。该属性在文本底部创建一个边框，可以模拟下划线。通过设置 border-bottom-color 属性，您可以指定下划线的颜色。

例如，以下是使用 border-bottom 实现与方法 1 相同的效果的方法：

border-bottom: 1px solid blue;
text-decoration: none;

注意： 现代浏览器支持 text-decoration-color 属性。如果您需要支持较旧的浏览器，您可能需要使用 border-bottom 方法来实现兼容性。