直接上图,即鼠标进入导航栏的某个选项时,出现下划线,但下划线具有伸缩动画,所以不显单调。(我不知道怎么弄动图(;´д`)ゞ)
代码如下,是从中间向两边伸缩,还是从左往右,都可以自己修改。
从中间向两边
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 50px;
background-color: black;
padding: 20px;
}
p{
height: 50px;
line-height: 50px;
text-decoration-line: none;
color: white;
/*以上修饰,下面正文*/
position: absolute;
}
p:before{
content: "";
width: 0;
border-bottom: 4px solid white;
position: absolute;
bottom: 0;
left: 50%;
transition: all linear 0.2s;
}
p:hover:before{
left: 0;
width: 100%;
}
从左边向右边移动
p:before{
content: "";
width: 0;
border-bottom: 4px solid white;
position: absolute;
bottom: 0;
left: 0;
transition: all linear 0.2s;
}
p:hover:before{
left: 0;
width: 100%;
}