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

采用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实现过渡效果！