CSS :after 疑似要素がすべての HTML 要素で機能しないのはなぜですか?

CSS :after プロパティの制約を明らかにする

CSS :after 擬似要素は、ドキュメント内の要素のコンテンツの後にコンテンツを追加します。木。ただし、その適用性には疑問が生じます。

要素の制限

CSS 仕様では、要素のツリー コンテンツの前後のコンテンツに :after を適用できると記載されています。制限なしで。ただし、実際には、画像 ()、入力 ()、テーブル (

) などの特定の要素はさまざまな動作を示します。

理解置換された要素

この動作を理解する鍵は、置換の概念にあります。要素。置換された要素とは、画像、プラグイン、フォーム要素などの外部リソースによって外観と寸法が定義された要素です。

:after および置換された要素

Crucially 、CSS 仕様では、:before と :after は非置換でのみ機能すると明示的に述べられています。 したがって、 のような要素を置き換えます。 <入力> :after または :before プロパティを持つことはできません。

DOM 構造の考慮事項

非置換要素で :before および :after を使用する場合、DOM 構造は次のようになります。 this:

span の内容

画像などの置換された要素の場合、これ構造が実現不可能であるため、動作に一貫性がありません。

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