参考文章
???<ul> ???????<li>111</li> ???????<li>2222</li> ???????<li>3333333</li> ???????<li>444444444</li> ???????<li>555555555555</li> ???????<li>66666666666666</li> ???</ul>
ul,li { ???margin: 0; ???padding: 0; ???list-style: none;}ul { ???height: 50px; ???line-height: 50px; ?background-color: #f5f5f5; ?border-radius: 8px;}ul li { ???float: left; ?padding: 0 20px; ?position: relative;}li::before { ?content: ""; ?position: absolute; ?top: 0; ?left: 100%; ?width: 0%; ?height: 100%; ?border-bottom: 2px solid #000; ?/* transition: all 0.3s linear; */}li:hover::before { ?left: 0; ?width: 100%;}/* li:hover ~ li::before { ?left: 0;} */纯CSS导航栏下划线跟随效果
原文地址：https://www.cnblogs.com/houfee/p/9780128.html