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

用 linear-gradient 實現

.text {
    text-decoration: none;
    background-image: linear-gradient(#333, #333);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    transition: background-size .3s;
}
.text:hover{
    background-position: 0 100%;
    background-size: 100% 2px;
}

效果如下

HOVER ME