tab 切換下劃線跟隨實現

• HTML 結構以下：

<ul>
  <li class="active">難以想象的CSS</li>
  <li>導航欄</li>
  <li>光標小下劃線跟隨</li>
  <li>PURE CSS</li>
  <li>Nav Underline</li>
</ul>

• 導航欄目的 li 的寬度是不固定的
• 當從導航的左側 li 移向右側 li，下劃線從左往右移動。同理，當從導航的右側 li 移向左側 li，下劃線從右往左移動。

設計思路 :

1. 利用絕對定位，將 li 的僞元素的寬度設置爲 0
2. 在 hover 的時候，寬度從 width: 0 -> width: 100%

3. 左移左出，右移右出 :

   • 將下劃線的 left 偏移量初始位置設置爲 left: 100%
   • 當鼠標 hover 的時候， left 偏移量設置爲 0
   • 使用 ~ 選擇符，改變當前選擇元素 以後 全部元素的行爲 :
     在不改變當前 hover 的 li 的下劃線移動方式，而改變它下一個 li 的下劃線的移動方式，
     對於當前 hover 的 li ，其對應僞元素的下劃線的定位是 left: 100%，而對於 li:hover ~li::before，它們的定位是 left: 0。

神奇的 ~ 選擇符

因此，咱們迫切須要一種方法，可以不改變當前 hover 的 li 的下劃線移動方式卻能改變它下一個 li 的下劃線的移動方式（好繞口）。

沒錯了，這裏咱們能夠藉助 ~ 選擇符，完成這個艱難的使命，也是這個例子中，最最重要的一環。

對於當前 hover 的 li ，其對應僞元素的下劃線的定位是 left: 100%，而對於 li:hover ~ li::before，它們的定位是 left: 0。CSS 代碼大體以下：

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}
 
li:hover::before {
    width: 100%;
    left: 0;
}
 
li:hover ~ li::before {
    left: 0;
}

點擊 tab 跟隨

結合 js 使用 active 類便可實現 點擊 tab 跟隨

.active ~ li::before {
  left: 0;
}
.active::before {
  width: 100%;
  left: 0;
  top: 0;
}

// 使用 jquery

$('li').on('click', function () {
  $(this).addClass('active').siblings().removeClass('active')
})

參考資料

難以想象的CSS光標下劃線跟隨效果
GitHub - chokcoco/iCSS
難以想象的純CSS導航欄下劃線跟隨效果
tab 切換下劃線跟隨實現