CSS 使用不同颜色为html锚点添加下划线

在本文中，我们将介绍如何使用CSS为HTML锚点添加下划线，并为不同的锚点指定不同的颜色。

阅读更多：CSS 教程

使用text-decoration属性添加下划线

要为HTML锚点添加下划线，我们可以使用CSS的text-decoration属性。这个属性可以用来添加许多不同的文本修饰效果，包括下划线。

下面是一个例子，展示了如何使用text-decoration添加下划线：

a {
  text-decoration: underline;
}

在上面的例子中，我们为所有的锚点添加了下划线效果。这将导致所有的锚点显示为带有下划线的文本。

使用伪类选择符为不同的锚点添加不同颜色的下划线

而要为不同的锚点指定不同的下划线颜色，我们可以使用CSS的伪类选择符。伪类选择符允许我们根据元素的状态或位置选择元素，并为其应用不同的样式。

下面是一个例子，展示了如何使用伪类选择符为不同的锚点指定不同的下划线颜色：

a:link {
  color: blue;
  text-decoration: underline;
}
a:hover {
  color: red;
  text-decoration: underline;
}
a:visited {
  color: purple;
  text-decoration: underline;
}

在上面的例子中，我们使用了三个伪类选择符：:link(未访问的锚点)、:hover(鼠标悬停的锚点)和:visited(已访问的锚点)。通过为每个伪类选择符指定不同的颜色，我们可以为每个状态的锚点添加不同颜色的下划线。

在这里，我们将未访问的锚点显示为蓝色，鼠标悬停的锚点显示为红色，已访问的锚点显示为紫色，并且所有的锚点都带有下划线。

给锚点添加自定义颜色的下划线

如果我们想要为锚点添加自定义颜色的下划线，可以使用CSS的背景-图像和背景-重复属性组合。以下是一个例子：

a.custom-underline {
  background-image: linear-gradient(to bottom, green, green);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}

在上面的例子中，我们创建了一个自定义类名为custom-underline的锚点样式。我们使用了linear-gradient创建了一个只有一像素高的绿色背景图像，然后将其应用到锚点的背景中。

通过使用background-position将背景图像放置在下方，并将background-repeat设置为no-repeat以避免重复显示，我们将创建一个只有一像素高的绿色下划线。background-size属性用于控制下划线的粗细。