<!DOCTYPE html>
<html>
<head>
<style>
.title span {
background: linear-gradient(to right, #ec6b5f, #61c554) no-repeat;
background-size: 0 2px;
background-position: right bottom;
transition: background-size 1s;
}
.title:hover span {
background-size: 100% 2px;
background-position: left bottom;
cursor: pointer;
}
</style>
</head>
<body>
<h2 class="title">
<span>
Springer Nature advances discovery by publishing trusted research, supporting the development of new ideas and championing open science.
Springer Nature advances discovery by publishing trusted research, supporting the development of new ideas and championing open science.
</span>
</h2>
</body>
</html>
标签：动画,right,span,下划线,supporting,trusted,background,css,size From： https://www.cnblogs.com/xiejn/p/18383568