無駄と文化

実用的ブログ

置換要素に::before使えなくてツラい問題

108つあるHTMLタグの中には置換要素と呼ばれるものがあるらしい。
簡単に言えば<img>タグのようなテキスト以外のものが描写される要素なんですが、その置換要素にはナントCSS::before擬似要素や::after擬似要素が使えません。

これが非常に不便で、私のような『最小のマークアップCSSぶちかまして上手いことやってやろう主義者』にとっては::before擬似要素のような隠された要素こそが生命線なんです。


画像をテキストに置き換えたい

まずやりたかったことを説明しよう。
HTML上は<img>タグが記述されているところを、CSSのみでテキストに置き換えたかった。

青写真はこう、

  1. <img>::before擬似要素を作り{content: attr(alt);}などとする
  2. font-sizecolorなどでいい感じにスタイルをあてる
  3. 本体の画像を{display: none;}的なもので消す

完璧、かと思われたが<img>タグが置換要素だったばっかりに全部パァ。

実際やってみる、

See the Pen xGWZBV by Mitsui (@todays-mitsui) on CodePen.

...できてる。

2つ目の<ima>タグ、src="#"としている方は::before擬似要素の生成もスタイルもちゃんと効いてますね。

つまり、

  • <img>タグは画像の読み込み後に置換要素になる
  • srcで指定したファイルのリンクが切れている場合、置換要素にならないので::before擬似要素が使える

ということみたいです。


そんなわけで画像がリンク切れの時だけ別のテキストが現れるCSSとか書けてこれはこれで面白いんじゃないかと思ったんですが、リンク切れを表す☒みたいなやつをどうやっても隠すことができませんでした。

置換要素に::before使えなくてツラい問題マジでツラいですね。
私からは以上です。