リンクホバーで左から右に下線アニメーションして、右に消えていく

タイトル通り、
「リンクをホバーすると、左から右に下線（アンダーライン）がアニメーションで出現し、マウスを離すと右に下線が消えていく」
アニメーションの実装です。

リンクがリッチになり、すごくおすすめです。

リンクホバー下線アニメの見本

See the Pen
リンクをホバーしたら左から右に下線が出て、右に消えていく by tom k (@tom-k-the-encoder)
on CodePen.

CSSコードまとめと、ちょっとした解説コメント

/*  a要素にposition: relative;を与えてあげます  */
a {
  position: relative;
}

/*  aの疑似要素afterを作成。アニメーションの始点は右端  */
a::after {
  background-color: currentColor;
  bottom: -6px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
  width: 100%;
}

/*  hoverしたときのafterの動き。アニメーションの始点は左端  */
a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}