神奇的 ~ 选择符
对于当前 hover 的 li ，其对应伪元素的下划线的定位是 left: 100%，而对于 li:hover ~ li::before，它们的定位是 left: 0。
ul li {
float: left;
width: 20%;
height: 60px;
line-height: 60px;
text-align: center;
border-bottom: 0px solid #000;
margin-right: 5%;
cursor: pointer;
position: relative;
}
li.active {
height: 50px;
line-height: 50px;
border-bottom: 2px solid #000;
}
li::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 50px;
border-bottom: 2px solid #000;
transition: 0.2s all linear;
}
li:hover::before {
width: 100%;
left: 0;
}
li:hover~li::before {
left: 0;
}