CSS 下划线颜色

在网页设计中，下划线是一种常见的装饰效果，在文字的下方添加一条水平线来强调显示。通常情况下，下划线的颜色和文字的颜色是一样的，但是在某些情况下，我们可能希望下划线的颜色和文字的颜色不同。本文将详细介绍如何通过CSS来设置下划线的颜色。

使用text-decoration-color属性

CSS3新增了text-decoration-color属性，用于设置文本的装饰线的颜色，包括下划线、删除线、上划线等。在实际使用中，我们可以通过设置text-decoration-color属性来指定下划线的颜色。

span {
  text-decoration: underline;
  text-decoration-color: red;
}

在上面的示例中，我们为span元素添加了红色的下划线。通过这种方式，我们可以快速简单地设置下划线的颜色。

使用伪元素::after

如果想要对某个元素的下划线进行更加个性化的设置，可以使用伪元素::after来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Underline Color</title>
<style>
  .underline {
    position: relative;
  }
  .underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: blue;
    z-index: -1;
  }
</style>
</head>
<body>

<p class="underline">This is a paragraph with custom underline color.</p>

</body>
</html>

在上面的代码中，我们通过给含有文字的 p 元素添加一个伪元素 ::after 实现了下划线的效果。可以根据需要调整 background-color 的颜色来改变下划线的颜色。