CSS 当悬停时给标签添加下划线

在本文中，我们将介绍如何使用CSS在悬停时给标签添加下划线。下划线是一个常用的效果，用于突出显示超链接，告诉用户该文本是可点击的。

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

要在标签悬停时添加下划线，我们可以使用CSS的text-decoration属性。text-decoration属性用于添加文本修饰效果，如下划线、删除线等。

<style>
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
</style><a href="#">这是一个链接</a>

在上面的示例中，我们先将标签的text-decoration属性设置为none，以删除默认的下划线效果。然后，我们使用:hover伪类为标签添加了一个悬停时的样式，将text-decoration属性设置为underline，以显示下划线效果。

添加其他下划线样式

除了常规的下划线效果，CSS还提供了其他几种下划线样式，如双下划线、点线、波浪线等。我们可以使用text-decoration-line属性来设置下划线的样式。

下面是一个示例，演示如何在悬停时给标签添加不同样式的下划线：

<style>
a {
    text-decoration: none;
}

a:hover {
    text-decoration-line: underline;
    /*text-decoration-style: dashed;*/   /* 取消注释以显示虚线效果 */
    /*text-decoration-style: double;*/   /* 取消注释以显示双下划线效果 */
    /*text-decoration-style: wavy;*/     /* 取消注释以显示波浪线效果 */
}
</style><a href="#">这是一个链接</a>

在上面的示例中，我们使用text-decoration-line属性设置下划线的样式为underline。如果我们想要显示虚线、双下划线或波浪线效果，只需取消注释相应的代码块并注释掉其他代码块。

自定义下划线样式

除了内置的下划线样式，我们还可以使用CSS的伪元素来自定义下划线的样式。使用伪元素可以实现更加灵活的下划线效果，包括颜色、粗细等。

下面是一个示例，演示如何使用伪元素自定义下划线样式：

<style>
a {
    position: relative;
    text-decoration: none;
}

a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: blue;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}

a:hover::after {
    visibility: visible;
    transform: scaleX(1);
}
</style><a href="#">这是一个链接</a>

在上面的示例中，我们使用伪元素::after来创建一个位于标签底部的下划线。通过设置position为absolute以及left、bottom、width和height属性，我们可以自定义下划线的位置和尺寸。background-color属性用于设置下划线的颜色。

在标签的:hover伪类中，我们将下划线的visibility属性由hidden改为visible，将transform的scaleX属性由0改为1，以显示下划线。