CSS 下划线动画

【CSS下划线动画【渡一教育】】

这个 span 中，当你鼠标移入的时候，会显示一个从左到右的下划线，同样地，当你鼠标移出时，这个下划线会向相反方向划出。

html

<div class="css_dline_anim_div">
    <span class="css_dline_anim_class">这个 span 中，当你鼠标移入的时候，会显示一个从左到右的下划线，同样地，当你鼠标移出时，这个下划线会向相反方向划出。</span>
</div>

style

.css_dline_anim_div .css_dline_anim_class {
    background: linear-gradient(to right, #7e2f2b, #146420) no-repeat right bottom;
    background-size: 0 2px;
    transition: background-size 0.5s;
}

.css_dline_anim_div .css_dline_anim_class:hover {
    background-position: left bottom;
    background-size: 100% 2px;
}