鏈接下劃線是非常常見的一種樣式，最近做了一個非常簡單的視覺效果，非常不錯，完整代碼查看。
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;
}
h2{
text-align: center;
margin-top: 100px;
}
h2 > a {
position: relative;
color: #FFF;
text-decoration: none;
padding-bottom: 5px;
}
h2 > a:hover {
color: #FFF;
}
h2 > 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;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style>
</head>
<body>
<h2>
<a href="/">懸停在我上面</a>
</h2>
</body>
</html>
創建這種效果是非常簡單的，不需要添加額外的DOM元素到HTML，不過需要考慮一下瀏覽器的兼容性問題，在老舊版本的瀏覽器中它只會顯示為一個普通的下劃線。
好了，現在正式開始。我們需要做的第一件事就是去除text-decoration，并設置鏈接為相對定位。我們需要確保鏈接在hover時不會改變顏色，這里我們拿h2舉例：
新聞熱點
疑難解答
