Result 1番上が画像のURLが存在しない時で、特に何もしない場合に表示されるやつ。 2番目が対策した場合+画像が無い時。 3番目が対策した場合+画像がある時。 何もしなければ1番目の表示になります。 対策すると2番目のように任意のスタイルで表示されます。 対策した場合でも3番目のように画像があれば影響を受けません。 cssご存知のように基本的にはimgに疑似要素は使う事が出来ません。 が、デモのように画像が存在しない時は使う事が出来るようなのでそれを利用してスタイリングする、みたいな話です。 img { display: inline-block; font-family: Arial, sans-serif; font-weight: 300; line-height: 2; text-align: center; min-width: 300px; min-height: 50p
![imgタグに指定した画像のURLが存在しない時に表示される状態をCSSだけで対応する](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6b1c87ada2ad66409793e3653c810e333009609/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2019%2F12%2Fsite-icon.png)