複数行のアンダーライン(下線)をホバー時にアニメーションさせる方法

ウオトミズ(UOTOMIZU)の中の人

複数行のアンダーライン(下線)をホバー時にアニメーション させる方法で苦戦していたのだけど、やっと方法が分かった。

擬似要素を使ってアニメーションさせた場合

ホバー時に下線をアニメーションさせる方法でよく見かけるのが、擬似要素にborder-bottom + width 0%を適用させて、widthをアニメーション時に100%にする方法だ。

その場合は下記のように動く。問題は、ホバー時にアニメーションさせたいテキストが複数行にまたがる場合に、一番下の要素にしか下線が引かれないことだ。

これだと、なんとなくポンコツなアニメーションになってしまう。

 

ホバー時に綺麗に複数行にまたがってアニメーションをさせるには

綺麗に複数行にまたがってアニメーションをさせるには、background-image(もしくはbackground)プロパティーを使う必要がある。

実際のコード

index.html


<div><a href="#">1行の場合:ホバーしてください。</a></div>
<div><a href="#">複数行の場合:ホバーしてください。複数行の場合:ホバーしてください。複数行の場合:ホバーしてください。複数行の場合:ホバーしてください。</a></div>

style.css


a {
  padding-bottom: 5px;
  display: inline;
  background-image: linear-gradient(180deg, transparent 80%, #53739F 0);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: 1s;
}
a:hover {
  transition: 1s;
  background-size: 100% 100%;
}

結果

これで綺麗に複数行でもアンダーラインのアニメーションが動くようになった。

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO