CSS实现导航栏下划线效果

简介CSS实现导航栏下划线效果


一般实现这个效果我们需要借助于js,但是我今天发现一个小技巧了可以单纯通过css就实现,一起来看看吧~.0.0


<style>    
.nav {    
list-style:none    
}    
.nav>li::before {    
content: "";    
position: absolute;    
border-bottom: 5px solid #0A94E3;    
transition: 0.2s all linear;    
}    
.nav>li:hover::before {    
width: 100%;    
top: 0;    
left: 0;    
transition-delay: 0.1s;    
border-bottom-color: red;    
}    
.nav>li:hover ~ li::before {    
left: 0;    
}    
.nav>li:active {    
background: #000;    
color: red;    
}    
</style>




image.png




声明:
1,如果您发现本文件已经失效不能下载,请联系站长修正或留言!
2,本站提供的资源多数为百度网盘下载,对于大文件,你需要安装百度云客户端才能下载!
3,部分文件引用的官方或者非网盘类他站下载链接,你可能需要使用迅雷、BT等下载工具下载!
4,本站推荐的资源均经由站长检测或者个人发布,不包含恶意软件病毒代码等,如果你发现此类问题,请向站长举报!
5,本站仅提供文件的免费下载服务,如果你对代码程序软件的使用有任何疑惑,请留言。
6,本网站在文章内容仅供于学习参考使用,请勿作为商业通途使用,版权归原作者所有。如您对内容、版权等问题存在异议请与本站联系,我们会及时进行处理解决。

下一篇:

tp5写分页内容会重置怎么办?


上一篇:

Navicat


文章评论

Top