<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1 {
position: relative;
/* 关键代码 实现折行效果 */
display: inline;
padding-bottom: 2px;
background-repeat: no-repeat;
background-size: 0 2px;
/* 控制线的位置 */
background-position: 50% 100%;
/* 0% 100% 从左向右变动 */
/* 50% 100% 从中间往两侧 */
/* 100% 100% 从右向左变动 */
/* 0% 50% 可制作横穿线*/
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
/* 自己可以配置更多创意 */
background-image: linear-gradient(to right, #3344aa 0%, red 50%, #333 100%);
}
h1:hover {
background-size: 100% 2px;
}
</style>
</head>
<body>
<h1>很好的文章：JavaScript可变范围提升很好的文章：JavaScript可变范围提升很好的文章：JavaScript可变范</h1>
</body>
</html>
