リンクにホバーしたら下線をアニメーション表示

Result

非表示にした疑似要素をホバー時に表示+遷移するようにしてあります

css

a:after {/*リンクに疑似要素を追加、配置し非表示に*/
  content: '';
  display: block;
  width: 100%;
  border: 1px solid black;
  transform: translate(0px, 6px);
  opacity: 0;
  color: #999;
  transition: transform .2s ease-out, opacity .2s ease-out;
}

a:hover:after {/*ホバー時に位置を移動させつつ表示*/
  transform: translate(0px, 0px);
  opacity: 1;
}

html

via

https://codepen.io/3oheme/pen/RNpgEM

codepen.io