読者です 読者をやめる 読者になる 読者になる

Ich lerne Ruby on Rails for Africa

Railsとアフリカとkintoneで苦戦するブログ

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要素の仕様らしい。

imgタグとafter要素

imgタグは中身空っぽ

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

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

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

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

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

という感じになる。

after要素

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

<div class="target">
   aaaa
</div>
.taget:after{
  content: "bbbb";
}

と、書くと

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

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


踏まえてimgとafter要素

これらを踏まえて、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要素をつけませんよーに気をつけなはれや!