ホバー時に左から右へ下線が伸びるアニメーションを実装したい場合、以前このブログでも紹介したことがある擬似要素を用いた実装方法では、例えば文章内にあるリンクなどで複数行にまたがるときに意図した見栄えになりません。
1行・複数行関係なく使えるアニメーション付きアンダーライン(下線)を実装したい場合は、以下のようにlinear-gradient()background-sizeを組み合わせることで実装できます。

擬似要素を用いた下線アニメーションの実装については下記エントリーの一部で紹介しており、どちらも見栄えはほとんど一緒ですが前者はtransform: scale()を、後者はwidthを変化させる違いがあります。

実装方法

実際の動きは以下デモのようになり、リンク箇所(文字色が濃い部分)にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。

実装にはCSSを下記のように記述し、ここでは.hover-underlineというclassを適用したいa要素に指定する想定になります。

.hover-underline {
  padding-bottom: .25em;
  background: linear-gradient(#3498db, #3498db) 0 100%/0 2px no-repeat;
  transition: background .4s;
  text-decoration: none;
}
.hover-underline.reverse {
  background-position: 100% 100%;
}
.hover-underline:hover {
  background-size: 100% 2px;
}

具体的な動きとしては、linear-gradient()を使って下線を表現したものをデフォルトではbackground-sizeの幅を0にすることで見えないようにしておき、ホバー時にそれを100%にすることで左から右へ且つ複数行の場合は上から下に下線が伸びていくように見せています。

下線の太さについては、上記で2pxを指定しているbackground-sizeの高さを任意のものに変更することで調整できます。(必要があればpadding-bottomも調整)
また、上記で.reverseというclassで用意しているように、初期状態のbackground-position100% 100%にすることで、ホバー時に右から左へ且つ複数行の場合は下から上に下線が伸びる形になります。

マーカーや背景を塗りつぶすタイプにも変更可能

上でbackground-sizeの高さを任意のものに変更することで下線の太さを調整できると紹介しましたが、値によってはマーカーが引かれている見栄えや背景を塗りつぶす見栄えにすることができます。
実装コードや実際の表示については、マーカーは.hover-marker、塗りつぶしは.hover-fillというclassがそれぞれ該当スタイルとなる形で以下デモで確認できます。