imgタグにafter要素（疑似要素）はつけれないだとーーー！！

今日、サイトのコーディングをしていて少しハマって

「imgタグにafter要素はつけれないだとーーー！！」

と叫んでしまいましたw

サイドバーによくあるランキングを実装する時に
画像の左上に順位を示すバッジを表示をしようと思っていました。

f:id:sugi511:20140106000446p:plain

なるべくHTMLを簡潔にしようと思い短めに。
そして、画像の重なりを考えて、cssのafter要素にすることにしました。

<li>
  <div class="thumb">
    <img src="img/sample.png" />
  </div>
  <h3>
    タイトル
  </h3>
</li>

.thumb > img:after{
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/rank1.png) no-repeat;
}

これで出てくると思ったのですが、全く出てこない。

見えない！何も見えない！

なぜか全く見えない！と思ったらafter要素の仕様らしい。

HTMLでは、閉じタグが自明である場合には書かないことになっている。
brタグもそうだし、imgやmetaタグなんかもそうです。

基本的に、この辺のタグはマークアップをしていない。
（という感覚ですが、間違ってたらすいません）

なので、imgタグで画像を表示させると

閉じタグをつけたイメージとしては

<img src="sample.png"></img>

という感じになる。

after要素は、実際にどこに差し込まれるのかというのを
きちんと知らないといけなかった。

<div class="target">
   aaaa
</div>

.taget:after{
  content: "bbbb";
}

と、書くと

<div class="target">
   aaaa
   <span>bbbb</span>
</div>

という感じに、タグ内の中身の後に差し込まれる。

これらを踏まえて、imgタグにafter要素を適応すると

<img src="sample.png" class="target">

.taget:after{
  content: "bbbb";
}

と、書くと

<img src="sample.png" class="target">
bbbb
</img>

after要素で付加される内容は、このようになる。

空要素であるimgに差し込まれるが故に、
after要素を指定しても何をしようと見えない！
何も見えない！！という状況が生まれる。

imgなどの閉じタグのないものには
before/after要素をつけませんよーに気をつけなはれや！

Ich habe hunger