导航栏激活态下划线效果的CSS实现
一、鼠标移入效果图如下:
二、div结构
<div class="navbar"> <ul> <li>首页</li> </ul> </div>
css如下:
.navbar { color: #ACB0BB; font-weight: 400; cursor: pointer; } .navbar ul { display: flex; } .navbar ul>li { margin: 0 44px; position: relative; /*注意此处相对定位*/ } .navbar ul>li:hover::after { content: ""; position: absolute; /*注意此处绝对定位*/ left: 2%; bottom: -5px; /* 调整下划线高度 */ width: 96%; height: 2px; /* 调整下划线宽度 */ background-color: #FFFFFF; /* 设置下划线颜色 */ }