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>