话不多说先附上代码
?<style> ???????ul li { ???????????float: left; ???????????display: block; ???????????list-style: none; ???????????margin-left: 20px; ???????????border-bottom: 2 ???px 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>通配符~的作用是当前元素的下一个元素
css实现导航栏下划线跟随效果
原文地址：https://www.cnblogs.com/wsjaizlp/p/9914450.html