溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“CSS3怎么制作鏈接下劃線”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS3怎么制作鏈接下劃線”吧！
鏈接下劃線是非常常見的一種樣式，最近做了一個非常簡單的視覺效果，非常不錯，完整代碼查看。
XML/HTML Code復制內容到剪貼板
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
body{
background-color: #000;
}
h3{
text-align: center;
margin-top: 100px;
}
h3 > a {
position: relative;
color: #FFF;
text-decoration: none;
padding-bottom: 5px;
}
h3 > a:hover {
color: #FFF;
}
h3 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #FFF;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h3 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style>
</head>
<body>
<h3>
<a href="/">懸停在我上面</a>
</h3>
</body>
</html>
創建這種效果是非常簡單的，不需要添加額外的DOM元素到HTML，不過需要考慮一下瀏覽器的兼容性問題，在老舊版本的瀏覽器中它只會顯示為一個普通的下劃線。
好了，現在正式開始。我們需要做的第一件事就是去除text-decoration，并設置鏈接為相對定位。我們需要確保鏈接在hover時不會改變顏色，這里我們拿h3舉例：
CSS Code復制內容到剪貼板
h3 > a {
position: relative;
color: #000;
text-decoration: none;
}
h3 > a:hover {
color: #000;
}
接下來，我們要添加border，通過變換隱藏它。插入一個:before并且設置它scaleX（0），保守起見，如果瀏覽器不支持，我們通過visibility: hidden隱藏它。
CSS Code復制內容到剪貼板
h3 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottombottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
最后設置動畫時間為0.3s，現在我們只需要設置元素在hover時顯示并且scaleX(1)：
CSS Code復制內容到剪貼板
h3 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
大功告成！
感謝各位的閱讀，以上就是“CSS3怎么制作鏈接下劃線”的內容了，經過本文的學習后，相信大家對CSS3怎么制作鏈接下劃線這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
