小编给大家分享一下纯CSS怎么实现导航栏下划线跟随效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
效果：
代码：
html：
<ul> <li>aaaa</li> <li>bbbbbbb</li> <li>cccc</li> <li>dddd</li> <li>eeee</li></ul>css：
ul { padding:0; margin:0; font-size:0;}li { font-size:20px; padding:5px 15px 5px 15px; display: inline-block; position:relative; cursor: pointer; transition: all 0.5s;}li::before { content:''; display:block; position:absolute; width:0%; bottom:0; left:100%; border-bottom: 2px solid #999; transition: all 0.5s;}li:hover::before { left:0; width:100%;}li:hover ~ li::before { left:0;}关键部分：
li:hover::before { left:0; width:100%;}li:hover ~ li::before { left:0;}以上是“纯CSS怎么实现导航栏下划线跟随效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
