【WordPress】リンクの下線を消す方法

こんばんは。

今回は地味にはまってしまったワードプレスのaタグ、リンクの下線を消す方法をお教えします。
ちなみに対象となる場所ですが、ゲームレビューページの▼ネタバレの部分です。

通常の方法

ある程度cssの知識がある方ならお分かりだと思いますが、通常はtext-decoration: none;を使えば消えます。

a{
text-decoration:none;
}

このようにcssに記載する。もしくは部分的に消したい場合は

■HTML
<a class=”no_underline”>▼ ネタバレ</a>

■CSS
.no_underline {
text-decoration:none;
}

こんな風にすれば消えます
が、しかし、いくらこのようにしても消えません。

ワードプレスでの解除法

全てがこうなっているのかどうかは不明なのですが、実は、ワードプレスのテーマ、TwentySixteen、TwentySeventeenあたりでは、aタグにbox-shadowが適用されています。
ですので、それを解除すればok

■HTML
<div class=”switch” onclick=”obj=document.getElementById(‘open’).style; obj.display=(obj.display==’none’)?’block’:’none’;”>
<a class=”no_underline”>▼ ネタバレ</a>
</div>

■CSS
.switch a {
box-shadow: none;
}

これで消えるはずです。