使用伪元素和css3实现鼠标移入 下划线向两边展开的动画效果效果

给导航加一个鼠标移入后 下划线向两边展开的动画效果效果

.navbar-nav>li>a:after{

  content: "";
  width:0;
  height:2px;
  background-color: $baseColor;
  position:absolute;
  left:50%;
  bottom: 0;
  transition: all 0.5s ;

}


.navbar-nav>li>a:hover:after{
  left: 0;
  width: 100%;

}