CSS :after の動作と要素の互換性
CSS :after プロパティは、ドキュメント フロー内の要素の後にコンテンツを拡張します。ただし、すべての要素がこの動作をサポートしているわけではないようです。 :after はなぜ特定の要素でのみ機能するのですか?
答え: 置換された要素と非置換の要素
CSS 仕様によれば、非置換の要素のみが機能します。 :before および :after プロパティがあります。置換された要素の外観と寸法は、画像、プラグイン、フォーム コントロールなどの要素を含め、外部で決定されます。
置換された要素とは何ですか?
置換された要素は次のとおりです。
置換された要素で :before と :after が機能しない理由
CSS 仕様では、:before と :after の相互作用が次のように記述されています。要素を置き換えた :after は完全には定義されていません。この側面は将来の仕様のために予約されています。
例
次の例を考えてみましょう:
<span>Content of span</span>
span:before { content: "Before "; } span:after { content: " After"; }
この DOM 構造例は次のようになります:
<span> <before>Before </before> Content of span <after> After</after> </span>
この構造は、画像などの置換された要素に対しては機能しません。
したがって、CSS :after プロパティは、非置換要素でのみ使用できます。これは、要素の外観が要素自体内のコンテンツによって決定されるためです。
以上がCSS :after がすべての HTML 要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。