ホームへ

【html/CSS】リンク(aタグ)の下線を消す/下線を引く方法【hover時も】

「aタグの下線がジャマだから消したい!」

「でもマウスを乗せたときには下線を引きたい!」

リンク(aタグ)の下線を消す/下線を引く方法を解説します。

【下線を消す】text-decoration:none

aタグの下線を消すには、aタグにtext-decoration:noneを指定します。

aタグにtext-decoration: none
<style>
a{
    text-decoration: none;
}
</style>
<a href="#">aタグにtext-decoration: none</a>

text-decorationは文字に線をつけるCSSです。

下記の値を指定できます。

  • none(なし)
  • underline(下線)
  • overline(上線)
  • line-through(取り消し線)

text-decoration:noneを指定することで、もともとあった線を消すことができます。

なお、aタグの下線を消すhtmlタグや属性はありません。

【下線を引く】text-decoration:underline

下線をつけるにはtext-decoration:underlineを指定します。

aタグにtext-decoration: underline
<style>
a{
    text-decoration: underline;
}
</style>
<a href="#">aタグにtext-decoration: underline</a>

aタグにはもともと下線があるため上記例では変化がありませんが、全体のaタグでは下線を消して特定のクラスをつけたaタグでは下線をつけたいときなどで使うことがあります。

なお、CSSを使わなくてもuタグを使うと下線を引くことができます。

普段は下線を消してhover時下線を引く方法

普通のaタグは、普段下線が引かれてあってhover時(マウスを乗せたとき)下線が消えます。

この逆、普段は下線を消してhover時下線を引くことができます。

普段は下線を消してhover時下線を引く
<style>
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
</style>
<a href="#">普段は下線を消してhover時下線を引く</a>

「:hover」はマウスを乗せたとき用の疑似クラスです。

普段のaでは「text-decoration: none」で下線を消し、hover時のaでは「text-decoration: underline」で下線を引くという設定になります。

【まとめ】下線を消す/引く方法

  • 【下線を消す】text-decoration:none
  • 【下線を引く】text-decoration:underline

普段は下線を消してhover時下線を引く方法

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

以上、リンク(aタグ)の下線を消す/下線を引く方法でした。

マンガで読める関連記事