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

标签：absolute   tag   ext   relative   one   ref   content   href   osi   

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

<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%
} 

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

标签：absolute   tag   ext   relative   one   ref   content   href   osi   

原文地址：https://www.cnblogs.com/chenxingbo/p/12227976.html