前端ABC<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qdabc.cn</title>
<style>
ul li {
float: left;
position: relative;
width: 100px;
list-style: none;
line-height: 60px;
margin: 0 5px;
text-align: center;
}
ul li a{
text-decoration: none;
color: red;
display: block;
}
a:hover:before{
-webkit-transform: scaleX(1);
transform: scaleX(1);/* scaleX(x) 通过设置 X 轴的值来定义缩放转换。 */
}
a:hover{
color: #59c7f9;
}
a:before{
position: absolute;
width: 100%;
height: 0;
left: 0;
bottom: -1px;
content: "";
border-bottom: 2px solid #59c7f9;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform .25s ease;
transition: transform .25s ease;
}
</style>
</head>
<body>
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">首页</a>
</li>
</ul>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » html5+css3 实现鼠标过境显示下边框,显示有过渡效果