老規矩先上張圖，如何使用純 CSS 制作如下效果？

在繼續閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動手嘗試一下，不借助 JS ，能否巧妙的實現上述效果。

OK，繼續。這個效果是我在業務開發的過程中遇到的一個類似的小問題。其實即便讓我借助 Javascript ，我的第一反應也是，感覺很麻煩啊。所以我一直在想，有沒有可能只使用 CSS 完成這個效果呢？

定義需求

我們定義一下簡單的規則，要求如下：

假設 HTML 結構如下：

導航欄目的  li  的寬度是不固定的

當從導航的左側  li  移向右側  li ，下劃線從左往右移動。同理，當從導航的右側  li  移向左側  li ，下劃線從右往左移動。
 

實現需求

第一眼看到這個效果，感覺這個跟隨動畫，僅靠 CSS 是不可能完成的。

如果想只用 CSS 實現，只能另辟蹊徑，使用一些討巧的方法。

好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成這個效果。分析一下難點：

寬度不固定

第一個難點，  li 的寬度是不固定的。所以，我們可能需要從  li 本身的寬度上做文章。

既然每個  li 的寬度不一定，那么它對應的下劃線的長度，肯定是是要和他本身相適應的。自然而然，我們就會想到使用它的  border-bottom 。

那么，可能現在是這樣子的（li 之間是相連在一起的，li 間的間隙使用  padding 產生）：

默認隱藏，動畫效果

當然，這里一開始都是沒有下劃線的，所以我們可能需要把他們給隱藏起來。

推翻重來，借助偽元素

這樣好像不行，因為隱藏之后，hover  li 的時候，需要下劃線動畫，而  li 本身肯定是不能移動的。所以，我們考慮借助偽元素。將下劃線作用到每個  li 的偽元素之上。

下面考慮第一步的動畫，hover 的時候，下劃線要從一側運動展開。所以，我們利用絕對定位，將  li 的偽元素的寬度設置為0，在 hover 的時候，寬度從  width: 0 -> width: 100% ，CSS 如下：