css3实现鼠标悬浮文字上方，文字底部的下划线向两边缩放！

LFWMP

于 2018-05-01 23:05:36 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css3 underline缩放文字下划线两边展开

本文链接：https://blog.csdn.net/qq_34122603/article/details/80160837

css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用CSS3及伪类实现鼠标悬浮时文字下方出现向两边展开的下划线效果。通过设置after伪类并在:hover状态下改变其scale属性来实现过渡动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

采用css3加伪类的方式显示当鼠标悬浮在文字上方时，文字底部出现向两边展开的效果！

css部分

.text-underline{
            display: inline;
            text-align: center;
            position: relative;
        }
        .text-underline::after{
            position: absolute;
            left: 0;
            top: 100%;
            content: '';
            background-color: aqua;
            width: 90%;
            transform: scale(0);
            -webkit-transform: scale(0);
            transition: all .5s;
            -webkit-transition: all .5s;

        }
        .text-underline:hover::after{
            height: 2px;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

    <h3 class="text-underline">
        这是一个测试！
    </h3>
    <span class="text-underline">Test!</span>

这里将样式封装为类，可以直接为行内元素添加类即可实现效果！
其实现原理就是使用after伪类在元素后方添加一条指定高度的线，但是scale的缩放设置为0，即不可见！当鼠标悬浮的时候再将scale的值设置为大于0,即可显示！最后再给该after添加transition实现过渡效果！