108つあるHTMLタグの中には置換要素と呼ばれるものがあるらしい。
簡単に言えば<img>タグのようなテキスト以外のものが描写される要素なんですが、その置換要素にはナントCSSの::before擬似要素や::after擬似要素が使えません。
これが非常に不便で、私のような『最小のマークアップにCSSぶちかまして上手いことやってやろう主義者』にとっては::before擬似要素のような隠された要素こそが生命線なんです。
画像をテキストに置き換えたい
まずやりたかったことを説明しよう。
HTML上は<img>タグが記述されているところを、CSSのみでテキストに置き換えたかった。
青写真はこう、
<img>の::before擬似要素を作り{content: attr(alt);}などとするfont-sizeやcolorなどでいい感じにスタイルをあてる- 本体の画像を
{display: none;}的なもので消す
完璧、かと思われたが<img>タグが置換要素だったばっかりに全部パァ。
実際やってみる、
See the Pen xGWZBV by Mitsui (@todays-mitsui) on CodePen.
...できてる。
2つ目の<ima>タグ、src="#"としている方は::before擬似要素の生成もスタイルもちゃんと効いてますね。
つまり、
<img>タグは画像の読み込み後に置換要素になるsrcで指定したファイルのリンクが切れている場合、置換要素にならないので::before擬似要素が使える
ということみたいです。
そんなわけで画像がリンク切れの時だけ別のテキストが現れるCSSとか書けてこれはこれで面白いんじゃないかと思ったんですが、リンク切れを表す☒みたいなやつをどうやっても隠すことができませんでした。
置換要素に::before使えなくてツラい問題マジでツラいですね。
私からは以上です。
