CSS 複数行 の リンク や 文字列 の アンダーライン アニメーション を実装する

複数行のアンダーラインアニメーションを作成

リンクや文字列をホバー時に左から右へ下線が伸びるアニメーションを実装する方法を解説します。

複数行にわたる下線アニメーションの作成

主に「liner-gradient()」と「background-size」を組み合わせて実装することができます。

<a href="https://natsu-blg.com/" class="test-underline">これは、複数行のアンダーラインアニメーションのサンプルテキストです。複数行にわたる文字やリンクでもアニメーションをつけた下線を表示させることができます。</a>

// 通常時の設定
a.test-underline{
  padding-bottom: .25em;
  background: linear-gradient(black, black) 0 100%/0 2px no-repeat;
  transition: background .4s;
  text-decoration: none;
}

// マウスホバー時の設定
a.test-underline:hover {
  background-size: 100% 2px;
}

今回は複数行の文字列にホバーした場合にアニメーションを実装する方法を解説しました。
このサイトの他の記事にもそのほかの役立つ記事が掲載されていますのでぜひご覧になってみてください↓

さらにHTML、CSSに関する知識を深められたい場合、筆者も利用しているUdemyで学習することをお勧めします。
参考までに、初心者にもおすすめのプログラムは
・WEBデザイン講座 Level0《対象：ゼロから始める超初心者の方》HTML と CSS に必要な基礎知識を学習します。
です。このプログラムは少し値段がするため、購読には勇気がいると思いますが、実際にサイトを作りながら要点がわかりやすく解説されているため、初心者にとてもおすすめです。
ぜひチャレンジしてみてください。
以下リンクで表示されるページの検索窓で上記プログラムを検索することで購読できます。
Udemyのプログラム言語一覧ページはここから。
ぜひご活用ください！

CSSの一覧に戻る