CSSTab栏下划线跟随效果

神奇的 ~ 选择符

对于当前 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;
}