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

|▌冷眼眸甩不掉的悲伤 提交于 2020-01-22 10:18:34

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

<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%
} 
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!