【html/CSS】リンクaタグの下線が消えない原因と解決方法5選

「text-decoration:noneを指定しているのにリンクの下線が消えないんだけど!?」

リンクaタグの下線が消えない（text-decoration:noneが効かない）原因と解決方法を5つ紹介します。

【原因1】優先順位で負けている

下記は「text-decoration:none」を指定した後に「text-decoration:underline」が指定されて上書きされたことで下線が消えていません。

<style>
a{
    /*効かない*/text-decoration:none;
}
.example>a{
    text-decoration:underline;
}
</style>
<div class="example">
    <a href="test.html">リンク</a>
</div>

【解決方法】優先順位を上げる

同じCSSが複数の値で指定されたとき、優先順位に基づいて値が決定されます。

セレクタ内のclassやidの数、指定順などで優先順位が決まるため、優先順位を操作して指定したい値が優先されるように調整しましょう。

<style>
.example>a{
    text-decoration:underline;
}
.example>a{
    /*効く*/text-decoration:none;
}
</style>
<div class="example">
    <a href="test.html">リンク</a>
</div>

優先順位について詳しくはこちら↓

【原因2】aタグ以外に指定している

aタグにtext-decoration:noneを指定したつもりが、別のタグに指定されていた場合、当然効きません。

<style>
.example{
    text-decoration:none;
}
</style>
<div class="example">
    <a href="test.html">リンク</a>
</div>

【解決方法】aタグに指定する

改めてaタグにtext-decoration:noneを指定しましょう。

<style>
.example a{
    text-decoration:none;
}
</style>
<div class="example">
    <a href="test.html">リンク</a>
</div>

【原因3】aタグの子孫要素に下線が引かれている

aタグをtext-decoration:noneで下線を消しても、その内側にある要素に下線が引かれているとリンクに下線が引かれているように見えます。

<style>
.example{
    text-decoration:none;
}
.example *{
    text-decoration:underline;
}
</style>
<a href="test.html" class="example"><span>リンク</span></a>

【解決方法】aタグの子孫要素の下線を消す

単純にリンクの内側にある要素の下線を消しましょう。

text-decoration:noneを指定するかtext-decoration:underlineの指定を消しましょう。

<style>
.example{
    text-decoration:none;
}
.example *{
    text-decoration:none;
}
</style>
<a href="test.html" class="example"><span>リンク</span></a>

【原因4】aタグの先祖要素に下線が引かれている

aタグを囲っている要素にtext-decoration:underlineが指定されている場合、その子要素に「text-decoration:none」を指定しても消えません。

<style>
.example{
    text-decoration:underline;
}
.example a{
    text-decoration:none;
}
</style>
<div class="example6">
    <a href="test.html">リンク</a>
</div>

【解決方法】aタグの先祖要素の下線を消す

この場合、aタグの優先順位をどんなにあげてもtext-decoration:noneは効きません。

aタグを囲っている要素にtext-decoration:noneを指定するかtext-decoration:underlineの指定を消しましょう。

<style>
.example{
    text-decoration:none;
}
.example a{
    text-decoration:none;
}
</style>
<div class="example">
    <a href="test.html">リンク</a>
</div>

【原因5】uタグがある

uタグは下線を引くhtmlタグです。これがあるとtext-decoration:noneを指定していても下線が引かれてしまいます。

<style>
.example{
    text-decoration:none;
}
</style>
<u><a href="test.html" class="example">リンク</a></u>

【解決方法】uタグを消す

下線がいらないのであればuタグはいりません。消しましょう。

<style>
.example{
    text-decoration:none;
}
</style>
<a href="test.html" class="example">リンク</a>

【まとめ】aタグの下線が消えない原因

• 【原因1】優先順位で負けている
  【解決方法】優先順位を上げる
• 【原因2】aタグ以外に指定している
  【解決方法】aタグに指定する
• 【原因3】aタグの子孫要素に下線が引かれている
  【解決方法】aタグの子孫要素の下線を消す
• 【原因4】aタグの先祖要素に下線が引かれている
  【解決方法】aタグの先祖要素の下線を消す
• 【原因5】uタグがある
  【解決方法】uタグを消す

aタグの下線が消えないときは先祖子孫要素に「text-decoration:underline」が指定されていないか確認しましょう。

以上、リンクaタグの下線が消えない（text-decoration:noneが効かない）原因と解決方法でした。