マウスホバーで下線が中央から伸びるリンク

<a href="#">マウスホバーで下線が広がる</a>

a{
  position: relative;
  text-decoration: none;
}
a:after{
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 100%;
  height: 1.5px;
  background-color: #0000ee;
  transition: all .3s;
  transform: scaleX(0);
}
a:hover:after {
  width:100%;
  transform: scaleX(1);
}