Html
    Css
    Js
.box{
      position: relative;
    }
    .animate{
      color: #ed6868;
      position: absolute;
      top: 0;
      left: 0;
      font-size: 30px;
      border-bottom:2px solid pink;
    }
    .animate:hover::before{
      max-width: 100%;
    }
    .animate::before{
      position: absolute;
      top: 0;
      left: 0;
      font-size: 30px;
      overflow: hidden; 
      max-width: 0;
      color: #000;
      content: attr(data-hover);
      border-bottom:2px solid orange;
      -webkit-transition: max-width 0.5s;
      -moz-transition: max-width 0.5s;
      transition: max-width 0.5s;
    }

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

动画滑动效果

0