導航欄目的 li 的寬度是不固定的 當從導航的左側 li 移向右側 li，下劃線從左往右移動。同理，當從導航的右側 li 移向左側 li，下劃線從右往左移動 實現需求 第一眼看到這個效果，感覺這個跟隨動畫，僅靠 css 是不可能完成的。
如果想只用 css 實現，只能另闢蹊徑，使用一些討巧的方法。
好，下面就借助一些奇技淫巧，使用 css 一步一步完成這個效果。分析一下難點：
寬度不固定
第乙個難點， li 的寬度是不固定的。所以，我們可能需要從 li 本身的寬度上做文章。
既然每個 li 的寬度不一定，那麼它對應的下劃線的長度，肯定是是要和他本身相適應的。自然而然，我們就會想到使用它的 border-bottom 。
預設隱藏，動畫效果
當然，這裡一開始都是沒有下劃線的，所以我們可能需要把他們給隱藏起來
li 推翻重來，借助偽元素
這樣好像不行，因為隱藏之後，hover li 的時候，需要下劃線動畫，而 li 本身肯定是不能移動的。所以，我們考慮借助偽元素。將下劃線作用到每個 li 的偽元素之上。
li::before
下面考慮第一步的動畫，hover 的時候，下劃線要從一側運動展開。所以，我們利用絕對定位，將 li 的偽元素的寬度設定為0，在 hover 的時候，寬度從 width: 0 -> width: 100%，css 如下：
li::before
li:hover::before
得到，如下效果：
左移左出，右移右出
ok，感覺離成功近了一步。現在還剩下乙個最難的問題：
如何讓線條跟隨游標的移動動作，實現當從導航的左側 li 移向右側 li，下劃線從左往右移動。同理，當從導航的右側 li 移向左側 li，下劃線從右往左移動。
我們仔細看看，現在的效果：
當從第乙個 li 切換到第二個 li 的時候，第乙個 li 下劃線收回的方向不正確。所以，可以能我們需要將下劃線的初始位置位移一下，設定為 left: 100%，這樣每次下劃線收回的時候，第乙個 li 就正確了：
li::before
li:hover::before
看看效果：
所以，我們迫切需要一種方法，能夠不改變當前 hover 的 li 的下劃線移動方式卻能改變它下乙個 li 的下劃線的移動方式（好繞口）。
沒錯了，這裡我們可以借助 ~ 選擇符，完成這個艱難的使命，也是這個例子中，最最重要的一環。
對於當前 hover 的 li ，其對應偽元素的下劃線的定位是 left: 100%，而對於 li:hover ~ li::before，它們的定位是 left: 0。css **大致如下：
li::before
li:hover::before
li:hover ~ li::before
至此，我們想要的效果就實現拉！撒花。看看
css導航欄選中是有移動下劃線的效果
html css body header div.logo div.logo span ul ul img ul li ul li a ul a hover move li nth child 1 hover move li nth child 2 hover move li nth child 3...
CSS3 不可思議的border屬性
原文 magic of css border property 譯文 不可思議的css border屬性 譯者 dwqs 在css中，其border屬性有很多的規則。對於一些事物，例如三角形或者其它的影象，我們仍然使用代替。但是現在就不需要了，我們可以用css形成一些基本圖形，我分享了一些關於這方面...
CSS 不可思議的border屬性, 冒泡提示框
url 在css中，其border屬性有很多的規則。對於一些事物，例如三角形或者其它的影象，我們仍然使用代替。但是現在就不需要了，我們可以用css形成一些基本圖形，我分享了一些關於這方面的技巧。size x large color red 詳細看原文.color size 正三角形 up css2 ...