scale等比缩放才能做到看上去能让线条以中心点展开

.nav-menu>ul>li>a::before {
  background: #333 none repeat scroll 0 0;
  bottom: -2px;
  content: "";
  height: 2px;
  position: absolute;//注意a一定得是relation相对定位才行，::before可以看做是a的子元素，a是父元素
  left:-1px;//适当的调整一下子元素::before和父元素a的对齐距离
  width: 100%;//这一点很重要，宽度100%就能继承a的宽度，否则怎么设置都会很突兀
-webkit-transform:scale(0);
  transform:scale(0);
  -webkit-transition:all .5s ease 0s;
  transition:all .6s ease 0s;
}

 

 

.nav-menu>ul>li>a:hover::before{//a滑过时::before伪类的效果
//  animation:underline1 0.5s ease 0s normal forwords 1 runing ;//forwords让动画停留在最后的状态  后面的1是指只循环一次
//  background: #333 none repeat scroll 0 0;
//  bottom: -2px;
//  content: "";
//  height: 2px;
//  position: absolute;
  transform:scale(1);//只用这一句就够了
}