导航栏激活态下划线效果的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; /* 设置下划线颜色 */ }
时间仓促,如有错误欢迎指出,欢迎在评论区讨论,如对您有帮助还请点个推荐、关注支持一下
作者:莫颀
出处:https://www.cnblogs.com/bokemoqi/p/17596490.html
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文链接,否则保留追究法律责任的权利。
若内容有侵犯您权益的地方,请公告栏处联系本人,本人定积极配合处理解决。