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

作者:J.sky · 发表于:
2023-05-07T20:41:35.000000Z
· 更新于:
2023-08-13T22:54:57.586617Z
· Tag: CSS

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

先看效果:

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

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

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

代码如下:

<style>
        .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>
<div class="boxhaha">
    <a href="#">linklink</a>
    <a href="#">linklink</a>
    <a href="#">linklink</a>
    <a href="#">linklink</a>
</div>