介绍 & lt; ul>
& lt;才能li> aaaa</li>
& lt;才能li> bbbbbbb</li>
& lt;才能li> cccc</li>
& lt;才能li> dddd</li>
& lt;才能li> eeee</li>
& lt;/ul> css: ul {
填充才能:0;
保证金才能:0;
字体大小才能:0;
}
li {
字体大小:20 px;才能
填充才能:5 px 15 px 5 px 15 px;
,,显示:inline-block;
位置:才能相对;
,,光标:指针;
过渡:才能,all 0.5年代;
}
李::before {
内容:才能& # 39;& # 39;;
显示才能:块;
位置:绝对的,才能
宽度:0%,才能
底才能:0;
左:才能100%;
边界底部才能:2 px solid # 999;
过渡:才能,all 0.5年代;
}
李:徘徊:before {
,,左:0;
宽度:100%,才能
}
李:hover ~,李::before {
,,左:0;
} 李:徘徊:before {
,,左:0;
宽度:100%,才能
}
李:hover ~,李::before {
,,左:0;
}
小编给大家分享一下纯CSS怎么实现导航栏下划线跟随效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
效果:
代码:html:
关键部分:
以上是“纯CSS怎么实现导航栏下划线跟随效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
