【CSS】aタグの下線をなくす方法

aタグにはデフォルトで下線が設定されていますが、デザインの関係上その下線を取り除きたい場面も多々あると思います。

今回はその方法を紹介。

text-decorationの設定

デフォルトのaタグは以下のようになります。

そこで、text-decorationというプロパティを設定します。 デフォルトでは、underline が設定されているので、今回はそれを none に。

a.link {
  text-decoration: none;
}

これでOK。

おまけ

aタグ以外の要素にもtext-decorationは設定可能です。
pタグとdivタグに設定するとこんな感じです。