這篇文章主要講解了“CSS3怎么制作鏈接下劃線”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS3怎么制作鏈接下劃線”吧！

專注于為中小企業(yè)提供網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)龍崗免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

鏈接下劃線是非常常見的一種樣式，最近做了一個非常簡單的視覺效果，非常不錯，完整代碼查看。

XML/HTML Code復制內(nèi)容到剪貼板

1.   

2.   

3.   

4.     

5.     

6.     

7.   

8.   

9.   

10.    

      

11.      懸停在我上面  

12.      

13.   

14.   

15.   

創(chuàng)建這種效果是非常簡單的，不需要添加額外的DOM元素到HTML，不過需要考慮一下瀏覽器的兼容性問題，在老舊版本的瀏覽器中它只會顯示為一個普通的下劃線。

好了，現(xiàn)在正式開始。我們需要做的第一件事就是去除text-decoration，并設(shè)置鏈接為相對定位。我們需要確保鏈接在hover時不會改變顏色，這里我們拿h3舉例：

CSS Code復制內(nèi)容到剪貼板

1. h3 > a {   

2.       position: relative;   

3.       color: #000;   

4.       text-decoration: none;   

5. }   

6.   

7. h3 > a:hover {   

8.       color: #000;   

9. }       

10.   

接下來，我們要添加border，通過變換隱藏它。插入一個:before并且設(shè)置它scaleX（0），保守起見，如果瀏覽器不支持，我們通過visibility: hidden隱藏它。

CSS Code復制內(nèi)容到剪貼板

1. h3 > a:before {   

2.       content: "";   

3.       position: absolute;   

4.       width: 100%;   

5.       height: 2px;   

6.       bottombottom: 0;   

7.       left: 0;   

8.       background-color: #000;   

9.       visibility: hidden;   

10.       -webkit-transform: scaleX(0);   

11.       transform: scaleX(0);   

12.       -webkit-transition: all 0.3s ease-in-out 0s;   

13.       transition: all 0.3s ease-in-out 0s;   

14. }   

15.   

最后設(shè)置動畫時間為0.3s，現(xiàn)在我們只需要設(shè)置元素在hover時顯示并且scaleX(1)：

CSS Code復制內(nèi)容到剪貼板

1. h3 > a:hover:before {   

2.       visibility: visible;   

3.       -webkit-transform: scaleX(1);   

4.       transform: scaleX(1);   

5. }  

大功告成！

感謝各位的閱讀，以上就是“CSS3怎么制作鏈接下劃線”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對CSS3怎么制作鏈接下劃線這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！