複数行のテキストでも下線追従アニメーション

小ネタです。
ホバー時に下線が左から右に流れるような追従アニメーション、今までafter疑似要素のscaleをtransitionする形で実装していたのですが、
この方法だと複数行対応ができないという欠点がありました。

• テキストをinlineブロックで囲う
• background-image で下線の色を指定し、background-size をtransitionさせる

これだけで、複数行にも対応させることができました。
inline要素は改行されたとしてもbackground-size-widthが変わらないというのは意外と盲点でした。

.inline {
  background-image: linear-gradient(to bottom, transparent, #4aed2b);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 10px;
  transition: background .3s ease-out;
  cursor: pointer;
}

.outside:hover .inline {
  background-size: 100% 10px;
}

Demo

See the Pen Untitled by Yumiko Kokubu (@yumikokh) on CodePen.