1. 前言
在网页设计中，下划线是一种常见的字体修饰方式。不仅可以用于超链接，还可以用于导航栏、标题、表格等等。在默认情况下，下划线颜色和文本颜色相同，但是我们可以通过一些方法来改变下划线颜色，下面我们就来一一介绍：
2. 在CSS中设置下划线颜色
2.1 利用text-decoration-color属性设置下划线颜色
text-decoration-color 属性可以用于设置文本装饰线上的颜色，包括下划线、删除线、上划线、描边等等。该属性只对有文本装饰线的元素起作用。
下面是一个设置红色下划线的例子：
<a href="#" style="text-decoration: underline;text-decoration-color: #F00;"><strong>红色</strong></a>注：该属性目前只有Safari浏览器和Chrome浏览器支持。
2.2 利用border-bottom属性设置下划线颜色
使用 CSS 的 border-bottom 属性，可以设置下划线的样式、粗细和颜色。下面是一个设置红色下划线的例子：
<a href="#" style="border-bottom: 1px solid #F00;"><strong>红色</strong></a>注：由于该方法设置的下划线比较粗，所以要用border-bottom样式的1px 或者 2px ，3px ，color的目的是对下划线进行颜色设置。
2.3 利用伪类设置下划线颜色
在 CSS 中，可以使用伪类选择器来选择某个元素的特定状态，比如 :hover，:active，:focus 等等。无论是在CSS 还是JS 中，这些方式都被称作状态选择器。
以下是设置红色下划线的代码：
a.text-underline {
position: relative;
}
a.text-underline::after {
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
background-color: #F00;
}
这段代码中，我们用一个伪类选择器，来给a元素添加一个 ::after 伪元素。在这个伪元素中，设置了一个红色的下划线。
3. 总结
通过CSS的属性设置，我们可以灵活地改变下划线的颜色、样式、粗细等。同时还可以使用伪类选择器，来实现更多的效果。
注：根据W3C标准，有两个比较好的方法，1、text-decoration-color属性，它只适用于在Web浏览器中显示的下划线。2、border-bottom，一条有锯齿的底线就非常的常用。