一、前言
上网冲浪的时候发现了一个好玩的css样式，是设计一个渐变色的下划线，一开始的标题默认没有下划线，当hover态时下划线从左往右出现，当鼠标移出时，下划线从左往右消失，当时脑子里面出现的想法是使用伪元素和背景渐变来模拟渐变色的下划线效果，我也这么想当然地去做了，结果我检查后看人家写的样式后才发现css真的是你永远学不透的语言。
二、分析
示例网站链接：dzone.com/javascript
大家可以进去感受下这个下划线效果。
下面是我本人一开始的实现思路：伪元素 + 背景渐变色 + 过渡动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.underline-move {
position: relative;
display: inline-block;
/* 使标题元素成为内联块元素，以便下划线仅占用文本宽度 */
}
.underline-move::after {
content: '';
position: absolute;
left: 0;
/* 从左侧开始 */
bottom: -3px;
width: 0;
height: 2px;
/* 下划线高度 */
background: linear-gradient(to right, red, yellow, green);
transition: width 1s ease;
/* 过渡动画：宽度变化，时长1秒，缓动效果 */
}
.underline-move:hover::after {
width: 100%;
}
</style>
</head>
<body>
<h2 class="underline-move">熟 练 掌 握 css 是 你 的 谎 言</h2>
</body>
</html>
但是这么写完后我发现个问题，当我鼠标移出时，我要怎么控制伪元素背景色可以从左往右消失呢？因为我本人的伪元素的位置是定在标题最左边位置，恕我愚笨，我没想到办法去更好地实现 。
想了十几分钟没想出来干脆直接打开检查“学习”人家是怎么写的，看完后才发现原来可以这么简单！
三、学习
人家大佬代码思路：背景色 + 控制背景距离，俩步搞定！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.title {
color: #333;
line-height: 2;
}
.title span {
background: linear-gradient(to right, red, yellow, green) no-repeat right bottom;
background-size: 0px 2px;
transition: background-size 1500ms;
}
.title span:hover{
background-position-x: left;
background-size: 100% 2px;
}
</style>
</head>
<body>
<h2 class="title">
<span>熟 练 掌 握 css 是 你 的 谎 言</span>
</h2>
</body>
</html>
background: linear-gradient(to right, red, yellow, green) no-repeat right bottom;设置标题文字下方的背景为从右到左的红黄绿渐变，且不重复。background-size: 0px 2px;设置背景大小为高度为2px，宽度为0px，实际上是隐藏了背景。transition: background-size 1500ms;设置背景大小变化的过渡效果为1.5秒。background-position-x: left;鼠标悬停时，将背景位置水平方向调整为左侧，实现从右到左的渐变效果background-size: 100% 2px;鼠标悬停时，将背景宽度调整为100%，实现完整显示渐变
看到这样式直接醍醐灌顶，原来背景样式还能这么玩~
