鏈結下劃線是非常常見的一種樣式，最近做了乙個非常簡單的視覺效果，非常不錯，完整**檢視。
xml/html code複製內容到剪貼簿
程式設計客棧
建立這種效果是非常簡單的，不需要新增額外的dom元素到html，不過需要考慮一下瀏覽器的相容性問題，在老舊版本的瀏覽器中它只會顯示為乙個普通的下劃線。
好了，現在正式開始。我們需要做的第一件事就是去除text-decoration，並設定鏈結為相對定位。我們需要確保鏈結在hover時不會改變顏色，這裡我們拿h2舉例：
css code複製內容到剪貼簿
程式設計客棧
接下來，我們要新增border，通過變換隱藏它。插入乙個:before並且設定它scalex（0），保守起見，如果瀏覽器不支援，我們通過visibility: hidden隱藏它。
css code複製內容到剪貼簿
最後設定動畫時間為0.3s，現在我們只需要設定元素在hover時顯示並且scalex(1)：
css code複製內容到剪貼簿
大功告成！
這樣就完成了乙個很有活力的下劃線動畫。
本文位址:
CSS動畫 有活力的鏈結下劃線
鏈結下劃線是非常常見的一種樣式，最近做了乙個非常簡單的視覺效果，非常不錯，可以點下面鏈結檢視。建立這種效果是非常簡單的，不需要新增額外的dom元素到html，不過需要考慮一下瀏覽器的相容性問題，在老舊版本的瀏覽器中它只會顯示為乙個普通的下劃線。h2 a h2 a hover接下來，我們要新增bord...
CSS3製作hover下劃線動畫
1 前幾天看到hexo的next主題標題hover效果很炫，自己嘗試寫了乙個，另乙個是next的實現，照例先上圖 2 實現小黑科技 j ascript void 0 class demo1 自己實現的hover效果 css樣式 demo1 demo1 before程式設計客棧 demo1 hover...
利用CSS自定義網頁超連結下劃線樣式
巧妙利用css自定義網頁下劃線樣式 實現方法很簡單，在源 的和之間加上如下的css語法控制 text decoration none background url underline.gif repeat x 100 100 padding bottom 4px white space nowrap...