マウスを乗せた時にシュルっと、ふわっと出てくるアンダーライン。ナビゲーションメニューなどによく使われているあれです。

See the Pen Hover Effect – Underline by Basilico (@Basilico) on CodePen.

Button-1とButton-2は、疑似要素であらかじめ用意したアンダーラインを opacity: 0 で隠し、transition で表示させています。

Button-3～6は、transform: scaleX() を使ってアンダーラインを延び縮みさせています。