效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小条</title>
<style>
/** { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }*/
.zhubin{
display: inline-block;
}
.zhubin a{
position: relative;
text-decoration: none;
color: #daa520;
font-weight: 100%;
margin: 0 200px;
display: inline-block;
}
.zhubin a:before{
content: "";
position: absolute;
left: 50%;
bottom: -3px;/*距离*/
width: 0;/*初始宽度*/
height: 5px;/*高度*/
background: pink;/*颜色*/
transition: all .5s;/*速度*/
}
.zhubin a:hover:before{
width: 100%;/*最后宽度*/
left: 0;/*最后的位置 定位左边*/
/*right: 0;*/
}
</style>
</head>
<body>
<div class="zhubin">
<a href="#">-------我是小条-------</a>
<a href="#">-------我是小条-------</a>
<a href="#">-------我是小条-------</a>
<a href="#">-------我是小条-------</a>
</div>
</body>
</html>算是自己的学习记录，重点都打了备注，我是为了页面的布局不受影响加了一个class，当然也可以不使用a标签
Comments NOTHING