css中间向两端延申hover样式

页面：

<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%);  // ！
}

效果: