本文最后更新于854 天前，其中的信息可能已经过时，如有错误请评论留言
先看效果，如下所示
话不多说，代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫彩动态下划线</title>
<style>
.title {
color: #333;
line-height: 2;
}
.title span {
/* 设置颜色渐变背景图，不重复，靠右，靠下 */
background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;
background-size: 0px 2px;
transition: background-size 1300ms;
}
.title span:hover {
/* 鼠标移入时，背景图宽度变为100% */
background-size: 100% 2px;
/* 背景图横向位置从左起，进入时从左开始，退出时样式失效，为上面的靠右起 */
background-position-x: left;
}
</style>
</head>
<body>
<h2 class="title">
<span>❤关注守一喵!!❤关注守一谢谢喵!!❤</span>
</h2>
</body>
</html>
