【改行にも対応】aタグのリンクをホバーすると下線が横に伸びるアニメーションを実装する方法

ページ上にリンクを設定する場合には、aタグを使用しますよね。

aタグで作成されたリンクは、通常以下のように下線が引かれています。

リンクテキスト

この下線を「ホバーに合わせてアニメーション付きで表示したい」という場合があるかと思います。

しかしそのままでは、下線にアニメーションをつけることができません。

そこで今回の記事ではlinear-gradientを使用して、リンクホバー時に下線が横に伸びるアニメーションを実装する方法を紹介します！

多くの記事では擬似要素を使った方法が紹介されていますが、この記事ではCSSグラデーションを使用します。

リンクテキストが改行される場合にも対応できますので、是非参考にしてみてください。

リンクの下線が横に伸びるアニメーションの実装内容について

今回の記事では、以下のようなアニメーションを実装していきます。

実際に以下のリンクにマウスカーソルを当てて確認してみてください。

下線が左から右に伸びるアニメーションが確認できるかと思います。

また改行が必要な長めのリンクでも、しっかりアニメーションが反映されていますね。

【問題】text-decoration: underlineにはアニメーションを設定できない

CSSにはtext-decorationプロパティがあり、この値をunderlineと指定することで、文字に下線を引くことができます。

ブラウザにはデフォルトのスタイルシートが用意されていて、aタグには通常以下の記述がされています。

text-decoration: underline;

しかし、このプロパティにはtransitionが効かないので、アニメーションを設定することができません。

下線の表示/非表示を切り替えることはできますが、以下の例のように一瞬で切り替わってしまいます。

【解決策】backgroundのlinear-gradientで下線を表現する

今回の実装では、グラデーションを作成するCSS関数linear-gradientで下線を表現します。

background-sizeプロパティにはtransitionが適用されるので、

という手順で作成することで、下線にアニメーションを設定することができます！

仕組みが理解できたところで、次は実際のコードを確認していきましょう。

【コピペ用】リンクの下線が横に伸びるアニメーションの実装コード

以下に全体の実装コードを用意しました。

コピペするだけですぐに使えるようにしてますので、自由にご利用ください。

<a href="リンク先のURLを記入" class="animate-link">リンクテキスト</a>

.animate-link {
  text-decoration: none; /* デフォルトの下線を非表示にする */
  color: #0086e0; /* 文字色 */
  background-image: linear-gradient(90deg, #0086e0, #0086e0); /* 線の色 */
  background-repeat: no-repeat;
  background-position: left bottom; /* 線の起点を左・下に設定 */
  background-size: 0 1px; /* 線の横幅を0、縦幅を1pxに */
  transition: background-size 0.6s; /* 線を伸ばすアニメーション実行時間を指定 */
}

.animate-link:hover {
  background-size: 100% 1px; /* 線の横幅を100%にする */
}

このままでも使えますが、次でコードの解説やカスタマイズ方法を紹介していきますので、興味がある方は次に進んでください。

【解説】リンクの下線が横に伸びるアニメーションの解説

ここではそれぞれのコードの解説と、カスタマイズ方法を紹介していきます。

まずはHTMLからみていきましょう。

HTMLのaタグでテキストリンクを作成

HTMLでは、aタグを使用してリンクを作成します。テキスト部分は自由に記入してください。

<a href="リンク先のURLを記入" class="animate-link">リンクテキスト</a>

href属性には、リンク先のURLを記入します。

そしてCSSで装飾するためのanimate-linkというクラスをつけます。

これでHTMLは完了です！

CSSで下線が伸びるアニメーションを作成

CSSでは下線のスタイルと、ホバー時に横に伸びるアニメーションを設定します。

.animate-link {
  text-decoration: none; /* デフォルトの下線を非表示にする */
  color: #0086e0; /* 文字色 */
  background-image: linear-gradient(90deg, #0086e0, #0086e0); /* 線の色 */
  background-repeat: no-repeat;
  background-position: left bottom; /* 線の起点を左・下に設定 */
  background-size: 0 1px; /* 線の横幅を0、縦幅を1pxに */
  transition: background-size 0.6s;　/* 線を伸ばすアニメーション実行時間を指定 */
}

.animate-link:hover {
  background-size: 100% 1px; /* 線の横幅を100%にする */
}

コードが少し長いので、分解しつつ解説していきますね。

aタグに設定されているデフォルトの下線を非表示にする

text-decoration: none;

CSSには、文字に下線を引くためのtext-decoration: underlineという機能があります。

ただしこれを使う場合、横に伸びるアニメーションを設定することができません。

今回はlinear-gradientで下線を実装するので、text-decorationの下線は非表示にしておく必要があります。

text-decorationの値にnoneを指定することで、下線を非表示にすることができます。

文字色と下線の色を設定する

color: #0086e0; /* 文字色 */
background-image: linear-gradient(90deg, #0086e0, #0086e0); /* 下線の色 */

リンクの文字色はcolor、下線の色はbackground-imageのグラデーションで設定します。

下線を単色にしたい場合は2箇所に同じ色を、グラデーションにしたい場合は別々の色を入れてください。

下線の起点を指定する

background-positionで、ホバーした時に下線が現れる起点を指定することができます。

値にはleft bottomが一番適していると思いますが、数パターン紹介しておきます。

background-position: left bottom; /* X軸の起点 Y軸の起点 */

“left bottom”を指定した場合のリンクテキスト

background-position: center bottom;

“center bottom”を指定した場合のリンクテキスト

background-position: left center;

“left center”を指定した場合のリンクテキスト

下線の横幅・縦幅を指定する

/* 通常時 */
.animate-link {
  background-size: 0 1px; /* 線の横幅を0、縦幅を1pxに */
}

/* ホバー時 */
.animate-link:hover {
  background-size: 100% 1px; /* 線の横幅を100%にする */
}

下線の大きさは、background-sizeで指定します。

このプロパティには横幅 縦幅の順で値を設定することができます。

まずは横幅からですが、通常時は線を隠しておきたいので、横幅のサイズを0にしておきます。これでデフォルトの状態では線は表示されません。

そしてホバー時に100%を設定することで、下線が表示されるようになります。

次に線の縦幅は、2つ目の値に指定します。

縦幅は太すぎると文字が隠れてしまうので、なるべく細めにしておくといいですね。

DEMOでは1pxに設定しています。

下線が伸びるアニメーションの実行時間を指定する

transition: background-size 0.6s; /* 線を伸ばすアニメーション実行時間を指定 */

transitionプロパティでは、線が伸びるアニメーションの実行時間を指定します。

0.6sと指定していますが、これは”0.6秒かけて線の横幅を0から100%にする”という意味になりますね。

この数値を変えることでアニメーションのスピードを調整できるので、各自試してみてください。

【まとめ】改行にも対応！リンクの下線が横に伸びるアニメーションを実装する方法

今回は、テキストリンクをホバーした時の下線にアニメーションをつける方法を紹介しました。

aタグで作成したリンクに動きをつけたい場合は、ぜひこの方法で実装してみてください！