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

• 2024.03.08
• 2020.09.17

HTML・CSS系

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

サンプルテキストリンク

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

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

この記事の目次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

自作のリンクボタン

まとめ

リンクの下線についてまとめてみました。通常ではtext-decorationをベースに設定していくことになりますが、少しデザイン要素が欲しい場合や、ワンポイントでなにか遊び心的なものを加えたいといった時に、linear-gradientを使った設定が使えます。

シンプルに下線をアニメーションとして表示することも可能ですし、サンプルとしてあげたようにリンクを背景色として設定してアレンジする事もできますし、ボタン的な要素の場合はより動きのあるボタンリンクにする事も可能です。

ただ、実際にはマウスホバー時にしか動きは無く、スマホではあまり意味がない設定という事にもなりかねず、乱用したりすると自己満足で終わってしまう恐れもあり、時間やコストをかけすぎてしまうのも本末転倒になりかねないので注意が必要です。

とはいえ、クライアント的にも受けは良かったりもするので、営業トークの1つ的な意味でワンポイントデザインなどで使って行くのも1つの手かもしれませんね。

記事のシェアにご協力お願いします

• 2024.03.08
• 2020.09.17

HTML・CSS系

テキスト装飾, HTML:Aタグ