CSSで複数行に対応したアニメーション付きアンダーライン（下線）を実装する方法 - NxWorld

ホバー時に左から右へ下線が伸びるアニメーションを実装したい場合、以前このブログでも紹介したことがある擬似要素を用いた実装方法では、例えば文章内にあるリンクなどで複数行にまたがるときに意図した見栄えになりません。 1行・複数行関係なく使えるアニメーション付きアンダーライン（下線）を実装したい場合は、以下のようにlinear-gradient()とbackground-sizeを組み合わせることで実装できます。 擬似要素を用いた下線アニメーションの実装については下記エントリーの一部で紹介しており、どちらも見栄えはほとんど一緒ですが前者はtransform: scale()を、後者はwidthを変化させる違いがあります。 実装方法 実際の動きは以下デモのようになり、リンク箇所（文字色が濃い部分）にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 実装にはCSS

[o_ti]

background-sizeをアニメーションさせて複数行に跨いだインラインテキストに対応する

[ks_w2002]

うん、契約とか金融説明とかに使えそう

[bottomzlife]

このスマホ時代、要らないクリエイティブ（笑）じゃね？

[field_combat]

背景のグラデーションを動かすのか。ええな