text-decoration:noneが効かず、リンクテキストの下線が消せないときの対処法

執筆者 Masa | 12月 13, 2020 | CSS, Chrome, SCSS | コメント0件

事象が起きた環境：Chrome87

要素にtext-decoration:none;を指定したが、聞いていない様子。

.test{
  text-decoration:none;
}

①displayのプロパティをblockまたはinline-blockにする。

.test{
  display:inline-block;
  text-decoration:none;
}

ちなみに反対に下線をテキストに付与したい場合は、以下で実装できます。

.test{
  display:inline-block;
  text-decoration:underline;
}

Witten by Masa

情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。