纯CSS怎么实现导航栏下划线跟随效果

小编给大家分享一下纯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怎么实现导航栏下划线跟随效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！