页面:
<li>
<h2>联系我们</h2>
<div class="hoverline"></div>
</li>
样式:
.hoverline {
width: 0; // !
height: 2px;
transition: width 0.5s;
-webkit-transition: width 0.5s;
}
li:hover .hoverline {
width: 100%; // !
height: 2px;
background-color: #0062b1;
position: relative;
left: 50%; // !
top: -2px;
transform: translateX(-50%); // !
}
效果: