css鼠标移入底部边框展开效果

经常看到这种效果，就研究了下。

<a href='' class='tag'>测试一下吧</a>

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