底部滑动的border

HTML：

  
底部滑动的border

CSS：

a{
  display:inline-block;
}
a:hover::after{
  content:'';
  display:block;
  top:100%;
  left:0;
  height:2px;
  background: #000;
  animation:0.5s linear silde;
}
@keyframes silde{
  from{
    width:0;
  }
  to{
    width:100%;
  }
}