aタグ内の擬似要素にはunderlineを付けたくない（IE対応）

5848 ワード
HTML CSS InternetExplorer IE HTML テキストリンク

この記事は、早稲田大学 AdventCalender 2016 15日目です。

Internet Explorerは未だ息をしています
なので、「少なくともInternet Explorer 11には対応しなければならない」案件が多いのが実態です。

今回も、ブラウザ検証中に「IEでの表示崩れ」が発生したのですが、ググっても解決策がスパッと見つからなかったので、対応策を残しておきます。

やりたかったこと

aタグ内に擬似要素（:before)を生成して、list-style-typeの真似事をしたい。
ただ、以下の条件を満たさなければならない。

  • aタグにunderlineをつけるが、
  • 擬似要素にはunderlineをつけない

上記の条件を満たす解決策は、すぐに見つかります。
擬似要素のスタイルに、display: inline-blockを付ければ良い。

sample
<a href="#">ナビゲーション1</a>
sample
a {
  text-decoration: underline;
}

a:before {
  content: "▶︎";
  display: inline-block;
}

DEMO

はまったこと

ブラウザ検証を行うと、IEでは擬似要素もunderlineが付いたままだった...

IE対応をするために、解決策を挙げるとすれば、「aタグに内のテキストノードをspanで囲って、そのspanにunderlineを引く」がある。

sample
<a href="#"><span>ナビゲーション1</span></a>
sample
a {
  text-decoration: none;
}

a:before {
  content: "▶︎";
  display: inline-block;
}

span {
  text-decoration: underline;
}

DEMO

だがしかし...

場合によっては、こんな状況が考えられます。

納品前のブラウザ検証でこの問題が発覚した

  • 大規模サイトの制作案件...
  • 途中からアサインされた...
  • 定義済みのaタグは、spanで囲ってない...
  • javascriptでのDOM操作は制約的にNG...

CSSだけで解決したい

ゴリ押しですが、こんな解決方法がありました。

DEMO

sample
<a href="#">ナビゲーション1</a>
sample
a {
  text-decoration: underline;
}

a:before {
  content: "▶︎";
  display: inline-block;
  height: 11.5px;
  overflow-y: hidden;
  font-size: 10px;
}

擬似要素の高さをunderlineを含まない程度に調整して、overflowをhiddenにしてしまうという方法です。

これで応急処置はできたかな、というところです。
しかし、場合によっては微妙なheightの調整が必要だったりします...

「IEではこんな表示崩れが起こるぞ！」ということを知っていれば、こんな面倒なことをしなくても済むのですが...😇

次は、@susuwatarinの「初心者がhubotをうんたら~の実践編です。火曜はハグの日。」です。