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;
}