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

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

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

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

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

aタグの下線を消すには、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を指定します。

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

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

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

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

普通のaタグは、普段下線が引かれてあって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タグ)の下線を消す/下線を引く方法でした。