效果展示

而且下劃線是與超連結同色的….大家可以自行測試…

實現方法

這個效果我們可以很方便的使用css偽元素來實現。主要是用到了transform 中的scale來縮放偽元素，達到拉長偽元素（下劃線）的結果。同時使用transform-origin來控制縮放方向，下面的原始碼複製即可使用….

原始碼如下

dom:

    <a href="#" class="super-link center">
        動態下劃線中間伸展
    </a>
    <a href="#" class="super-link left">
        動態下劃線左邊伸展
    </a
 
>

    <a href="#" class="super-link right">
        動態下劃線右邊伸展
    </a>

css:

        .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;
        }