在我们制作导航栏的时候，一般都是用js来实现悬浮动画，其实css中befe伪元素也能完美实现悬浮动画效果。
html
<div class="items">
<div class="item">556资源网</div>
<div class="item">556资源网</div>
<div class="item">556资源网</div>
</div>
css
.items {
display:flex
}
.item {
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: #e2e2e2;
color: #333;
position: relative;
margin: 10px 10px 0px 0px;
cursor: pointer;
}
.item:before {
content:'';
height:2px;
background-color:#116a8c;
width:100%;
position:absolute;
left:0;
bottom:0;
transform:scaleX(0);
transition:.3s;
}
.item:hover:before {
transform:scaleX(1);
}
广告插入
