12
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-12-21

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

Internet Explorerは未だ息をしています:angel:
なので、「少なくとも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

だがしかし...

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

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

  • 大規模サイトの制作案件...
  • 途中からアサインされた...
  • 定義済みの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をうんたら~の実践編です。火曜はハグの日。」です。

12
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?