css实现鼠标悬停文字动态显示下划线的效果，移出下划线消失

记录一下学习笔记：

今天在大佬的视频下学习了，鼠标悬停文字时添加下划线滚动效果,鼠标移出时下划线消失，如图展示：

实现思路：使用渐变背景作为下划线效果使用，如果需要黑色下划线可以更改渐变颜色。

参考CSS linear-gradient() 函数：https://www.runoob.com/cssref/func-linear-gradient.html

代码即样式如下：

 <h2  class="title_line">
     <span>展示鼠标移入添加下划线效果,鼠标移出时消失，效果展示。</span>
</h2>

<style>
/* 字体的颜色及行高设置 */
.title_line{ 
    color: #333; 
    line-height: 2;
}
/* 鼠标未移入时效果设置 */
.title_line span{
    /* 创建一个线性渐变，可参考下文链接属性
     to right设定属性从右开始渐变 即红色-绿色的渐变  
     中间2个为渐变的颜色 可以换为黑色的
     no-repeat不重复 
     right bottom表示下划线出现的位置在文字的右下侧  
     */
    background:linear-gradient( to right, #79b989, #e34b4b) no-repeat right bottom;
     /*即下划线（背景图）在默认情况下宽度为0 */
    background-size: 0 2px; 
    /* 设定过度时间 */
    transition: background-size 1300ms; 
}
/* 鼠标进入后的设置 */
.title_line span:hover{
    /* 悬停 下划线的横向滑动位置为左 */
    background-position-x: left;
    /* 设定下划线宽度为100%展示 */
    background-size: 100% 2px;
}
</style>

这样下划线的效果就实现了😘