本篇文章主要介绍了纯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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。