溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS3怎么制作鏈接下劃線

發(fā)布時間：2021-08-10 18:02:17 來源：億速云 閱讀：173 作者：chen 欄目：web開發(fā)

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

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

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

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4.   <meta charset="gb2312">  

  5.   <meta name="viewport" content="width=device-width">  

  6.   <title>JS Bin</title>  

  7. <style>  

  8. body{   

  9.   background-color: #000;   

  10. }   

  11.   

  12. h3{    

  13.   text-align: center;   

  14.   margin-top: 100px;   

  15. }   

  16.   

  17. h3 > a {   

  18.   position: relative;   

  19.   color: #FFF;   

  20.   text-decoration: none;   

  21.   padding-bottom: 5px;   

  22. }   

  23.   

  24. h3 > a:hover {   

  25.   color: #FFF;   

  26. }    

  27.   

  28. h3 > a:before {   

  29.   content: "";   

  30.   position: absolute;   

  31.   width: 100%;   

  32.   height: 2px;   

  33.   bottom: 0;   

  34.   left: 0;   

  35.   background-color: #FFF;   

  36.   visibility: hidden;   

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

  38.   transform: scaleX(0);   

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

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

  41. }   

  42.   

  43. h3 > a:hover:before {   

  44.   visibility: visible;   

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

  46.   transform: scaleX(1);   

  47. }   

  48. </style>  

  49. </head>  

  50. <body>  

  51.    <h3>  

  52.      <a href="/">懸停在我上面</a>  

  53.    </h3>  

  54. </body>  

  55. </html>  

  56.   

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

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

CSS Code復(fù)制內(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復(fù)制內(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復(fù)制內(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)過本文的學(xué)習(xí)后，相信大家對CSS3怎么制作鏈接下劃線這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手