:after:beforeは便利だけど

cssを書いていて、あまり使わなかった擬似クラスのafter,beforeは便利であることを今さら知らされたが、落し穴が。きっかけは画像のキャプションを画像の直後に表示すると言う要求から。

画像の下に説明をつける場合はかなりあると思う。実はこれまでそれぞれの画像と文字列をdivで囲んで、そのdivをdisplayプロパティでinline-blockを指定していたりした。
しかし、after擬似クラスを使えば簡単だろうと考えた。

そもそもbefore,after擬似クラスとは

ようするに要素の直前や直後に内容を挿入できるもの。挿入内容はcontentプロパティで指定してやればいい。
例えばh2タグがあって、それにはいつも★マークをつけたい場合

h2:before {content:”★”;}と書いてやればいい。

さて、画像の場合imgタグの属性でtitleを書くだろう。これをafter擬似クラスで書いてやれば画像の下にtitle属性で書いた文字列が現れるはずだと思った。

imgタグにbefore,after擬似クラスは効かない

その場合はこう書けばいいということになる。実はネット上の質問の答えとしてあったのだが。

しかし、これは効かないのだ。要するにimgタグにはこの擬似クラスが効かない。
理由はこの擬似クラスがタグの中に挿入するという働きでその機能を実現していて、したがって閉じタグのないimgタグのなかに書くわけにはいかないからだ。やってみればわかることだ。

時々生半可な答えがあるんで注意しましょう。