ホバーで下線が流れるように出現

ホバーでテキストに下線が出現します。
改行にも対応しています。

ホバーすると下線が端から出現するアニメーションを実装しました。
一行であればいくつかやり方があるかと思ったのですが、2行以上の場合を実装したことがなかったので挑戦してみました。
こちらは案件にも使えそうなので、コードストックとしてスニペットにも登録したいと思います。

タッチデバイスではクリックで発火します。

<a class="c-link-1">
    <span class="c-link-1__txt">ホバーでテキストに下線が出現します。<br>改行にも対応しています。</span>
</a>
<!-- [/c-link-1] -->

.c-link-1 {
  display: inline-block;
  cursor: pointer;
}

.c-link-1__txt {
  background-image: linear-gradient(black, black);
  background-position: 0 100%;
  background-size: 0 0.1rem;
  background-repeat: no-repeat;
  transition: background-size 0.5s;
}

@media (hover: hover) and (pointer: fine) {
  .c-link-1:hover .c-link-1__txt {
    background-size: 100% 0.1rem;
  }
}