CSSを使ったホバー時のリンク下線のアレンジ！
カラーやサイズを変えたり動きのある表示にする方法

2024.03.08
2020.09.17

HTML・CSS系

ページ内にテキストリンクを設定する時はAタグを使って設定をしていくことになりますが、この場合通常の設定ですと、ただの下線が引かれるという状態になります。

サンプルテキストリンク

リンクのテキストカラーや太字などの装飾は可能なため、サイトやページなどによって多少の違いはありますが、基本的にテキストリンクというとこの形になります。

通常のテキストリンクの設定ではここから変更という設定はないのですが、少し応用編ということで、マウスカーソルをテキストリンクに当てた:hover時に、下線がアニメーションになる設定を紹介してみたいと思います。

この記事の目次

そもそものリンク下線の設定について

改めてのおさらいにはなりますが、リンクの下線などについては、text-decorationにて設定がされています。

a{
  text-decoration: underline;
}

このtext-decorationの設定を使う事で、テキストリンクに下線を付けたり、通常時は付けずにリンクホバー時のみに下線を付けたりといった設定が可能になります。

a {
  color: #0000ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

サンプルテキストリンク（ホバー時は青の下線）

text-decorationでは細かな設定ができない

普通の制作であればそこまで気にする必要もなく、使うこともなかなか無いのですが、リンクをより目立たせたい、何かおもしろい要素が欲しい、クライアントがちょっと変わった事好きといったようなケースで、リンクの装飾をもう少ししたい！というケースが稀にあります。

ですが、このtext-decorationではアニメーション的は効かずに、transitionなどを仮に書いたとしても効きません。

underlineの設定をしても、即座にラインが表示/非表示となるだけでゆっくり表示したり、徐々に表示したりといったような遊び心的なことを加える事はできません。

background-image: linear-gradientで下線を付ける

そんな時に使えるのが、この、background-image: liner-gradient になります。
これを使う事で、transitionを効かせることができ、リンクテキストにマウスオーバーをすれば下線をゆっくり表示したりすることが可能です。

実際の使い方

これも実際のコードを見た方が早いかと思います。
自分たちのサイトで試す場合はコピペ＋色味やクラス名の微調整で使えるはずです。

<a href="URL" class="link01">リンクのテキスト</a>

a.link01 {
  text-decoration: none;
  background-image: linear-gradient( #0000ff, #0000ff );
  background-size: 0 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: all .3s;
}

a.link01:hover {
  background-size: 100% 1px;
}

必要なコードはこれだけです。
詳細については後ほど各コードの意味や役割なども簡単に記述しますが、background-image: linear-gradientを使った事がある方はすぐ理解できるかと思います。

この設定をすることで、テキストリンクのtext-decorationを非表示にしつつ、マウスオーバー時に左から右に伸びる下線を設定することができます。

サンプルテキストリンク。ホバー時に横線がアニメーションします

リンクが長くなって2行など折り返しになったとしても、問題なく正常に動作しますので複数行のリンクでも問題なく使えます。

各コードの解説

ではそれぞれのコードを見ていきましょう。
そもそもの今回の流れをテキストで解説してみると

リンク下線を非表示に設定

a.link01 {
  text-decoration: none;
}

まず、text-decorationをnoneにして非表示にしています。

リンクの下線のカラーを設定

a.link01 {
  background-image: linear-gradient( #0000ff, #0000ff );
}

background-image: linear-gradientを使って、リンク下線のカラーを設定しています。
グラデーションカラーの設定になるため、2色設定する必要があり、もし単色ではなくグラデーションカラーにしたい場合は、それぞれカラーを変更してください。

また、本来は色指定の前に、90degなど、指定した色をどこからどう表示するのかを設定する必要があり、デフォルトではTo bottomの向きになっていて、上から下に指定したカラーでグラデーション表示をします。

ただ、今回のように同じカラーを指定する場合はグラデーションにならないため省略して可能ですが、もしグラデーションカラーにする場合は、90degを入れて、左から右の指定にしておくと一番しっくりくる設定になるはずです。

a.link01 {
  background-image: linear-gradient( 90deg, #0000ff, #009900 );
}

リンク下線のサイズを設定

a.link01 {
  background-size: 0 1px;
}

/* ホバー時の設定 */
a.link01:hover {
  background-size: 100% 1px;
}

ここで下線のサイズを設定しています。
通常時にはリンク下線は隠しておくため、横幅サイズを0として非表示にしています。

:hoverの設定で100%とすることによって、通常時は横幅0、マウスホバー時には横幅100%表示のため、テキストに下線が表示されるという仕組みになります。

また、text-decorationでは下線の高さのサイズを調整できませんが、linear-gradientを使う事で、リンク下線が2pxや3pxといった太い線で表す事も可能にはなります。（その際はpaddingで高さ調整なども必要です）

リンク下線の起点となる位置を設定

a.link01 {
  background-position: left bottom;
}

ここで、linear-gradientのカラー指定した色の下線を、どこをスタート地点とするかの起点となる位置を指定しています。X軸とY軸をそれぞれ設定します。リンク下線になるので、left bottomが基本となります。

これを、例えばright bottomと設定すると、テキストの右から左に伸びるリンク下線になりますし、left centerと設定すると、ホバー時に打ち消し線のような見え方になります。

下線の伸びる時間（秒）を指定

a.link01 {
  transition: all .3s;
}

ここで、リンク下線が何秒かけて表示するかを設定します。
上記では、0.3秒かけてリンクの下線が表示されますし、0.7sとすれば0.7秒かけてリンクの下線が表示されます。

ただ少し注意しなければならないのは、短い文字のテキストリンクと、長い文字のテキストリンクだと同じ秒数の設定でも、長さが変わるため、体感的な速度というのは変わってきますので、設定する際は色々テストしてちょうど良い長さを設定しましょう。個人的には0.2～0.5くらいが妥当かなと思っています。

実際に設定を色々変更したリンク下線のサンプル

最後に、少し上記で説明したリンク下線のアニメーションをよりアレンジしたもののコードを作ってみましたので、何をどう変更すればどのような動きになるのかなどを確認いただければと思います。

高さとグラデーションカラーのリンクホバー設定

a.link02 {
  padding-bottom: 5px;
  text-decoration: none;
  background-image: linear-gradient( 90deg, #0000ff, #33ccff );
  background-size: 0 3px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: all .5s;
}

a.link02:hover {
  background-size: 100% 3px;
}

上記のコードの実際のサンプルは下記になります。

サンプルテキストリンク。ホバー時に横線がアニメーションします

下線を背景として設定したサンプル

a.link03 {
  padding: 5px;
  text-decoration: none;
  background-image: linear-gradient( 90deg, #0000ff, #33ccff );
  background-size: 0 100%;
  background-position: left top;
  background-repeat: no-repeat;
  transition: all .4s;
}

a.link02:hover {
  background-size: 100% 100%;
}

サンプルテキストリンク。ホバー時に横線がアニメーションします

このように、設定で色々なリンク下線をアレンジする事ができるようになりますが、くれぐれもやりすぎには注意しましょう。

ちなみに言えば、当サイトでデモページへ飛ばすリンクもこの設定を応用して作ったものになります。

自作のリンクボタン