マウスホバー時だけ下線を表示するCSS

マウスホバーでリンクに下線を表示する

2022-04-27

CSSの解説

コードを見る

HTML

<a href="#">マウスホバー時だけ下線表示</a>

CSS

a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

標準時は text-decoration: none; で下線を削除しておき、ホバー時のみ text-decoration: underline; で下線を表示させます。

aタグはデフォルトで text-decoration: underline; が実装されているため、aタグ内の text-decoration: none; は必須です。

青＝リンクというのが浸透してきたため、ホバー時にだけ下線を表示するのが標準的なリンクのデザインとなりつつあります。

See the Pen Untitled by チータツ＠ブログについて語る (@cheese_fuji) on CodePen.

See the Pen Untitled by チータツ＠ブログについて語る (@cheese_fuji) on CodePen.