CSSのtext-decorationで一部のテキストだけ下線を非表示にする

ちょっとしたCSSのTipsを紹介します。

テキストの一部をtext-decorationの適用対象外にしたい

text-decoration: underlineにより下線が表示されるリンクがあるとします。

html

<a href="#">詳細をみる →</a>

👆 テキストの矢印（→）にまで下線がかかっています。もし、矢印には下線を表示したくない場合にはどうしたら良いのでしょうか。

text-decoration: noneが効かない…？

「下線を消したい部分にtext-decoration: noneを指定すればいいのでは？」と思うかもしれません。実際に試してみましょう。

html

<a href="#">詳細をみる <span class="arrow">→</span></a>

css

.arrow { text-decoration: none; }

👆 何も変わりません。矢印の下線は残ったままです。

一旦text-decorationを解除する方法もあるが…

「リンクをtext-decoration: noneにしておいて、必要な部分にだけ下線を引けばいいのでは？」と思うかもしれません。

html

<a href="#"><span class="underline">詳細をみる</span> →</a>

css

a { text-decoration: none; }
.underline { text-decoration: underline; }

👆 矢印の下線だけが消えました。たしかにイメージ通りにはなったのですが、少しややこしいですよね。リンクにデフォルトで下線をつけたいケースもあるでしょうし、ホバー時の処理がややこしくなるかもしれません。

inline-blockを指定すれば下線は非表示になる

最も簡単な方法は下線を消したい部分にdisplay: inline-blockを指定することです。

html

<a href="#">詳細をみる <span class="arrow">→</span></a>

css

.arrow { display: inline-block }

👆 display: inline-blockが指定されている部分には下線が表示されません。

疑似要素でも使える

疑似要素内のテキストでもこの方法が使えます。

html

<a href="#" class="link-with-arrow">詳細をみる</a>

css

.link-with-arrow:after {
  content: "→";
  display: inline-block;
}

仕組み

text-decorationの仕様に以下のような記述があります。

Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. They are also not propagated to inline children of inline boxes, although the decoration is applied to such boxes.

「text-decorationはインラインブロックレベルの子孫のコンテンツには反映されない」という内容が書かれています。そのため、display: inline-blockを指定した部分はtext-decorationの適用対象外になるわけですね。