a[target="_blank"]::after で付加した画像の位置がおかしい時の対処法

焦った話

いつも通り何も考えずに a[target="_blank"]に外部リンクですよー、という意味の画像をつけて確認.....

※わかりやすいように、aとa::afterそれぞれに色を薄くつけてあります。

謎の空白が空いているではありませんか。しかも、この画像、後続の文にがっつり被ってしまいます。

仕方ない、教えてgoogle先生！ざっと調べました。出てきません。私、焦りました。

原因

デベロッパーツールで一つずつ確認し定期ました。すると、思いもよらないやつが原因でした。そいつは、text-indentだったのです。

HTML

<style>
    p {
      text-indent: 1em;
    }
</style>
<p>
  <a href="https://google.com" target="_blank">Google</a>
</p>

以上のように、pにtext-indentを適用して、 pの子要素にaを配置していました。その影響で、aにもtext-indentが継承されてしまい、謎の空白が空いてしまったのですね。

解決

ということで、aのtext-indentを無効にしてあげればよさそうですね！

HTML

 <style>
    p {
      text-indent: 1em;
    }

    a {
      text-indent: 0;
    }
  </style>

<p>
  <a href="https://google.com" target="_blank">Google</a>
</p>

意図した通りになりました！

おわりに

text-indentは継承しないで欲しいですね。気をつけましょう！