CSS3绘制有活力的链接下划线

2024-07-11 08:32:37

字体：大中小

来源：转载

供稿：网友

链接下划线是非常常见的一种样式，最近做了一个非常简单的视觉效果，非常不错，完整代码查看。

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>