CSS `:before` および `:after` 擬似要素が `` 要素で機能しないのはなぜですか?

擬似要素と画像要素: 互換性のジレンマ

CSS の領域では、:before や :after などの擬似要素が広く使用されています。 Web ページ上の要素の視覚的な外観を向上させるために使用されます。ただし、画像要素 () に関しては、これらの疑似要素は空白を描画しているように見えるため、なぜ img 要素で機能しないのかという疑問が生じます。

技術的説明

その理由は CSS 仕様自体にあります。公式ドキュメントには、「この仕様は、::before および ::after と置換された要素 (HTML の IMG など) の相互作用を完全には定義していません。」と明示的に記載されています。言い換えれば、画像などの置換された要素に適用されるときの擬似要素の動作は、現在の標準では完全には規定されていません。このあいまいさにより、ブラウザの不一致やサポート不足の余地が残されています。

現在のブラウザ サポート

この不特定の動作の結果、Chrome や Firefox などの主要なブラウザはサポートされないことを選択しました。 img 要素による疑似要素をサポートします。これは、画像に :before または :after を含めるように CSS を細心の注意を払って作成したとしても、その効果は表示されないことを意味します。

考えられる解決策

その間現在のところ、疑似要素を img 要素で強制的に動作させる公式の方法はありません。いくつかの回避策があります。 explore:

• コンテナ要素で画像をラップします: 画像を
  でラップします。または
• CSS フィルターを使用する: ボックス シャドウや明るさなどの CSS フィルターを使用して、疑似要素と同様の視覚効果を実現します。

未来Outlook

CSS 仕様によると、置換された要素との疑似要素の相互作用の完全な定義は、将来の仕様で概説される予定です。これにより、img 要素での :before および :after の将来のサポートへの扉が開かれる可能性があります。ただし、それまでは、画像に同様の機能を求める場合、これらの回避策が最も実用的なアプローチであり続けます。