导航鼠标悬浮时底部边框从中间往两边移动效果

.ui-box {
    text-decoration:none;
    position:relative;
    padding:10px
}
.bottom-inOutSpread:after{
    content:‘‘;
    position:absolute
}
.bottom-inOutSpread:after {
    border-bottom:2px solid #333;
    left:51%;
    right:51%;
    bottom:0px;
    transition: all .2s;
}
.bottom-inOutSpread:hover:after {
    left:0%;
    right:0%
} 

<a href=‘‘ class=‘ui-box bottom-inOutSpread‘>测试一下吧</a>