css部分
<style type="text/css">
body{
width: 100%;
}
.eg{
margin: 0px auto;
width: 200px;
height: 50px;
background: yellowgreen;
position: relative;
}
.eg:after{
content: "";
overflow: hidden;
height: 1px;
background: #333;
position: absolute;
top: 30px;
left: 50%;//定位在线的中间
width: 0;
transition: all 0.5s;
}
.eg:hover:after{
width: 200px; //鼠标悬停张开宽度
left: 0%;//当鼠标悬停时从中间到了最左边而它的宽度刚好为满宽所以
//才有同时向两边张开的效果
}
</style>
html语句
<body>
<div class="eg"></div>
</body>
上下线条只需在加before伪类元素 与上述方法相似，只需改动绝对定位的left top 值
如有更好的方法欢迎评论
扫一扫
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
