なぜ疑似要素は CSS の「タグ」で機能しないのでしょうか?

疑似要素と画像要素: CSS の難問

CSS の :before や :after などの疑似要素は広く適用可能であるにもかかわらず、画像要素 (<img src="/static/imghwm/default1.png" data-src="http://0.gravatar.com/avatar/this-is-not-a-hash" class="lazy" alt="なぜ疑似要素は CSS の「タグ」で機能しないのでしょうか?" >) を使用する機能は依然として不可解な例外のままです。以下のコード スニペットに示されているように、疑似要素を img 要素に追加しても期待した結果は生成されません:

<img  src="/static/imghwm/default1.png" data-src="http://0.gravatar.com/avatar/this-is-not-a-hash" class="lazy" alt="なぜ疑似要素は CSS の「タグ」で機能しないのでしょうか?" >

img:before {
  content: "hello";
}

div や span などの他の要素とシームレスに動作しますが、望ましい効果は次のとおりです。 img 要素に適用すると存在しません。

舞台裏: CSS仕様

CSS 仕様は、この矛盾を明らかにしています。疑似要素と置換要素 (HTML の img を含む) の間の相互作用が現在のバージョンでは完全には定義されていないことが明示的に示されています。これは、現在の仕様が img 要素を含む疑似要素の動作を指定していないことを意味します。

考えられる解決策: 標準化を待っています

ただし、この状況は無期限に続くわけではありません。この仕様では、疑似要素と置換された要素の間の相互作用が将来のバージョンでさらに定義されることが示唆されています。これにより、最終的には疑似要素がより包括的かつ一貫した方法で img 要素に対してサポートされるようになるという期待が残ります。

それまでは、img 要素を使用して同様の効果を実現しようとしている開発者は、次のような代替アプローチを検討する必要があるかもしれません。 JavaScript を使用するか、img の周囲に追加のラッパー要素を作成するなど。

以上がなぜ疑似要素は CSS の「タグ」で機能しないのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。