转载自 https://codepen.io/Chokcoco/pen/PRJvLN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS导航栏下划线跟随效果</title>
<style>
nav {
100%;
line-height: 80px;
background-color: #eee;
}
ul {
display: flex;
margin: 0 auto;
padding: 0;
60vw;
}
li {
position: relative;
flex: 1;
text-align: center;
font-size: 20px;
list-style: none;
cursor: pointer;
}
/* 借助伪元素 */
li::before {
content: '';
position: absolute;
top: 0;
left: 100%;
/* 刚开始下划线不显示，hover状态下下划线从一侧运动展开 */
0;
height: 100%;
border-bottom: 2px solid #000;
transition: 0.2s all linear;
}
li:hover::before {
100%;
left: 0;
transition-delay: 0.1s;
}
li:hover ~ li::before {
left: 0;
}
</style>
</head>
<body>
<nav>
<ul>
<li>关注</li>
<li>推荐</li>
<li>排行榜</li>
<li>视频</li>
<li>关于我们</li>
</ul>
</nav>
</body>
</html>