话不多说先附上代码
<style>
ul li {
float: left;
display: block;
list-style: none;
margin-left: 20px;
border-bottom: 2px black solid;
position: relative;
}
ul li::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
transition: 0.2s all linear;
}
ul li:hover::before {
width: 100%;
left: 0;
}
ul li:hover~li::before {
left: 0;
}
</style>
</head>
<body>
<ul>
<li>跟着</li>
<li>导航栏</li>
<li>光标小下划线跟随</li>
<li>跟随走动的下划线</li>
<li>跟随走动</li>
</ul>
</body>
通配符~的作用是当前元素的下一个元素