Code：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Demo</title>
<style>
.demo-title {
color: #414141;
line-height: 1.8;
}
.title-content {
background: linear-gradient(to right, #ec6819, #63a71c) right bottom/0 2px no-repeat;
transition: background-size 720ms ease-in-out 160ms;
}
.title-content:hover {
background-position-x: left;
background-size: 100% 2px;
}
</style>
</head>
<body>
<h4 class="demo-title">
<span class="title-content">作业帮是在线教育品牌，致力于用科技手段助力教育普惠，运用人工智能、大数据等技术，为学生、老师、家长提供学习、教育解决方案，智能硬件产品等</span>
</h4>
</body>
</html>标签：right,下划线,title,hover,background,CSS,size From： https://www.cnblogs.com/fanqshun/p/17280035.html