【コーディング備忘録】テキストリンクにカーソルを置いた時に下線を表示させるCSS

テキストにaタグを使ってリンクを設定すると、デフォルトの状態だと

このように、ちょっと古くさい見た目で表示されてしまいますよね。文字色が青だと、配色が整ったデザインを損なってしまう恐れがあります。

今回はそれを解消し、さらにカーソルを置いたときに下線が表示されるCSSをご紹介します。
これからコーディングを始める方は知識として覚えておいて損はないと思います！

文字色と下線をスタンダードな状態に戻す

まずは、cssでaタグに対して下線を非表示にし、文字色を黒にする指定をします。

a{
　text-decoration: none;
　color: #000;
}

この段階まではリセットCSSにあらかじめ記述されているかもしれません。

次に、aタグに対してhover時の指定をします。

a:hover{
　text-decoration: underline;
}

すると、このようにカーソルを置いた時にのみ下線を表示させることができます。

ぜひ、活用してみてくださいませー。