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);//只用这一句就够了
}