CSS 文字底線效果

用 box-shadow 實現

.text{
    text-decoration: none;
    box-shadow:0 -1px 0 #2858aa inset;
    transition:box-shadow .2s ease-in-out;
}
.text:hover{
    box-shadow:0 -1px 0 rgba(0,0,0,0) inset,
               0 3px 0 #2858aa;
    transition:box-shadow .2s ease-in-out;
}

結果如下

HOVER ME

用 psudo element 和 scaleX 實現

.text {
    text-decoration: none;
    position: relative;
}
.text::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #6ac7ef;
    transform-origin: bottom right;
    transform: scaleX(0);
    transition: transform .3s ease;
}
.text:hover::before{
    transform-origin: bottom left;
    transform: scaleX(1);
}

效果如下

HOVER ME