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