採用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實現過渡效果！