2021-08-31

最新推荐文章于 2024-10-02 15:35:50 发布

张张养帅柴

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量73

点赞数

分类专栏： vscode html5 文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_44922719/article/details/120011330

版权

vscode 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

css实现动态下划线效果

在这里插入图片描述

 	<a href="#" class="super-link center">
        动态下划线中间伸展
    </a>
    <a href="#" class="super-link left">
        动态下划线左边伸展
    </a>

    <a href="#" class="super-link right">
        动态下划线右边伸展
    </a>

 		.super-link{
            position: relative;
            text-decoration: none;
            color: #000;
        }
        /*伪元素是两个冒号*/
        .super-link::after{
            content: '';
            width: 100%;
            height: 1px;/*设置伪元素的高度，这里是下划线的粗细*/
            position: absolute;
            top: 100%;
            left: 0;
            background-color: currentColor;
            /*当前标签继承的文字颜色，这里让伪元素的背景色与父元素的文字颜色相同*/
            transform: scale(0);
            transition:all .35s;
        }
        .super-link:hover::after{
            transform: scale(1);
        }
        .left::after{
            transform-origin: left;
        }
        .right::after{
            transform-origin: right;
        }
        .center::after{
            transform-origin: center;
        }