动态下划线

.titleLine {
    background: linear-gradient(to right,#ec695c,#61c454) no-repeat right bottom;
    background-size: 0 2px;
    transition: background-size 1000ms;
  }
  .titleLine:hover {
    background-position-x: left;
    background-size: 100% 2px;
  }

 <h3>
              <span class="titleLine">一天的工作保持好心情哦～</span>
            </h3>