关于css文字下划线动画实现

直接上代码

html部分

 <div>
        <span class="txt">
            文字下滑动画
        </span>
    </div>

css部分

    .txt {
        background: linear-gradient(270deg, #4f95fd 0%, #1059df 100%) no-repeat left bottom;
        background-size: 0px 2px;
        background-position-x: right;
        transition: background-size 600ms;
    }
    
    .txt:hover {
        cursor: pointer;
        background-position-x: left;
        background-size: 100% 2px;
    }