css链接悬停时滑动的下划线效果

本文介绍: 当链接悬停时，a:hover::after 选择器更改 vi si bi li t y 和 transform 属性，使伪元素变为可见并水平缩放以匹配锚点标记的宽度。为了使动画平滑，a::after 选择器上定义了 transition 属性，以指定动画的持续时间和缓动功能。在提供的代码中，a::after 选择器创建了一个伪元素，该伪元素位于 a 标记后面。该伪元素具有绿色背景颜色和 10％锚的高度。要创建链接悬停时滑动的下划线效果，可以向锚点标记添加伪元素，并使用 CSS 过渡动画来显示它。

要创建链接悬停时滑动的下划线效果，可以向锚点标记添加伪元素，并使用 CSS 过渡动画来显示它。

先看效果：
在这里插入图片描述

在提供的代码中，a::after 选择器创建了一个伪元素，该伪元素位于 a 标记后面。该伪元素具有绿色背景颜色和 10％锚的高度。它相对于链接绝对定位并最初使用 vi si bi lity：hidden 隐藏，使它不会在链接悬停之前出现。

当链接悬停时，a:hover::after 选择器更改 vi si bi lity 和 transform 属性，使伪元素变为可见并水平缩放以匹配锚点标记的宽度。为了使动画平滑，a::aft e r 选择器上定义了 tr ans ition 属性，以指定动画的持续时间和缓动功能。

通过组合这些 CSS 属性，当用户悬停在链接上时创建了一个滑动下划线效果。

代码如下：

<style&gt;
        .boxhaha{
            display: flex;
        }
        a {
            margin: 0 5px;
            position: relative;
            text-decoration: none;
        }
        a::after{
            content: '';
            z-index: -1;
            position: absolute;
            background-color: #44ce7b;
            width: 100%;
            height: 10%;
            bottom: -2px;
            left: 0;
            visibility: hidden;
            transform: scaleX(0);
            transition: transform 200ms ease-in-out;
        }
        a:hover::after{
            visibility: visible;
            transform: scaleX(1);
        }
</style&gt;
<div class="boxhaha"&gt;
    <a href="#"&gt;linklink</a>
    <a href="#">linklink</a>
    <a href="#">linklink</a>
    <a href="#">linklink</a>
</div>