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

画像要素を使用した疑似要素の機能への対処

機能を強化する試みとして、この質問では、なぜ :before や :before などの疑似要素を使用するのかを検討します。 :after は、div や他のタグと同様に画像 () 要素と対話しません。スパン。この問題を説明するために、次の HTML と CSS を考えてみましょう:

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt=""/>

img:before {
  content: "hello";
}

Chrome 13 や Firefox 6 などのブラウザでこのコードを調べると、画像要素に予期した変更が発生していないことがわかります。この動作は、div 要素とspan 要素によって示される互換性とは対照的です。

仕様を詳しく見てみると、次の抜粋が表示されます。

Note. This specification does not fully define the interaction of ::before and ::after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

このステートメントは、疑似要素間の相互作用の定義が不完全であることを示唆しています。および画像要素は、現在の非互換性を暗示しています。この件に関するさらなる洞察については、このプラットフォームの別の回答を参照してください。

以上が`:before` と `:after` 擬似要素が ` 要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。