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

ウオトミズ(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%;
}

結果

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

 

.

スポンサーリンク


Fatal error: Uncaught Error: Call to undefined function is_mobile() in /home/ykplay/uotomizu.com/public_html/a/wp-content/themes/atelier/piece-ads.php:11 Stack trace: #0 /home/ykplay/uotomizu.com/public_html/a/wp-includes/template.php(724): require() #1 /home/ykplay/uotomizu.com/public_html/a/wp-includes/template.php(671): load_template('/home/ykplay/uo...', false) #2 /home/ykplay/uotomizu.com/public_html/a/wp-includes/general-template.php(168): locate_template(Array, true, false) #3 /home/ykplay/uotomizu.com/public_html/a/wp-content/themes/atelier/single-article.php(33): get_template_part('piece', 'ads') #4 /home/ykplay/uotomizu.com/public_html/a/wp-includes/template.php(724): require('/home/ykplay/uo...') #5 /home/ykplay/uotomizu.com/public_html/a/wp-includes/template.php(671): load_template('/home/ykplay/uo...', false) #6 /home/ykplay/uotomizu.com/public_html/a/wp-includes/general-template.php(168): locate_template(Array, true, false) #7 /home/ykplay/uotomizu.com/public_html/a/wp-content/themes/atelier/single.php(7): g in /home/ykplay/uotomizu.com/public_html/a/wp-content/themes/atelier/piece-ads.php on line 11