就像上圖這樣的動畫效果 在導航欄里的時候，下划線跟隨鼠標移動，鼠標移出導航欄時，下划線回到初始位置，同時要適應導航的寬度 為了適應導航的寬度，就不能給導航元素設置 margin，然后將導航元素的 clientWidth 設置給下划線 然后需要讓下划線獨立於導航之外，從而保證它的無縫 ...

神奇的 ~ 選擇符 對於當前 hover 的 li ，其對應偽元素的下划線的定位是 left: 100%，而對於 li:hover ~ li::before，它們的定位是 left: 0。 ul li { float: left; width: 20 ...

...

先來看一下效果： 1、基本效果就是這樣的 ，鼠標懸停，下划線划入。鼠標離開，下划線划出 2、下划線的划入是有方向的，從左側划入懸停，下划線由左向右伸長。從右側划入，下划線由又往左伸長 實現思路 1、導航是由ul+li組成的，在這里顯然li 的寬度是不固定 ...

這幾日學習html，一直在B站亂逛，發現網站的動效做的真好。然后翻到了這一頁： 點此查看 上面的導航欄是一個下划線跟隨的效果。由於有一個初始的選項（當前頁面對應標簽保持藍色），鼠標划過時除了高亮項下面的下划線也要跟隨。如果只實現前面這些效果可以用css完成，但是其實這里面的下划線是一個動畫 ...

一、思路： 　　將偽元素:before和:after定位到元素底部中間，設置寬度從0變成100%達到目的。 二、實現： 　　1、首先定義一個塊狀元素（行內元素沒有寬高）並修改樣式為一個背景色為淺灰色的矩形，設置相對定位。 html代碼 <div id="underline ...

...

...