css 渐变下划线实现 移入移出 动画

  <style>
        .title{
            color:#333;
        }
        .title span{
            background: linear-gradient(to right,#ec695c,#61c454) no-repeat right bottom;
            background-size: 0 2px; 
            transition: background-size 1300ms;
        }
        .title span:hover{
            background-position-x: left;
            background-size: 100% 2px;
        }
 </style>

 <h2 class="title">
        <span>
            十年后，你会发现css才是最难学懂得语言，你就好好得努力学习吧别得瑟了的搜罗了魏汝稳热望呢
        </span>
 </h2>