広告あり

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

コーディング

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

デザインはじめました

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

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

Sponsor

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

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

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

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

 

カーソルを置いたときに、下線を表示させる

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

a:hover{
 text-decoration: underline;
}

デザインはじめました

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

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

コメント