利用css3实现鼠标移入下划线向两边展开效果

将其从距离左边50%宽度为0,改变成距离左边0%宽度为100%就可以实现

html
<a>under test</a>

css
a {
  position: relative;
}
a:after {
  content: "";
  width:0;
  height:5px;
  background:blue;
  position:absolute;
  top:100%;
  left:50%;
  transition:all.8s;
}

a:hover:after {
  left:0%;
  width:100%;
}