CSS :after が要素の後にコンテンツを追加できないのはどのような場合ですか?

特定の要素に対する CSS :after の制限を理解する

CSS :after 疑似要素は、要素のドキュメントの後にコンテンツを追加するために使用されますツリーのコンテンツ。 CSS 仕様には制限が明示的に記載されていませんが、:after は特定の要素でのみ機能することが確認されています。

要素の互換性の決定

要素の互換性を決定する重要な要素要素が :after プロパティを受け入れることができるかどうかは、それが 置換された要素 であるかどうかによって決まります。画像 () やフォーム入力 () などの置換された要素の外観と寸法は、外部リソースによって定義されます。

CSS 仕様では、:before と :after のみであると明示的に規定されています。非置換要素を操作します。これは、次のような要素が置き換えられたことを意味します。

:コンテンツが追加された後。

その背後にある理由制限

非互換性は、置換された要素がドキュメント ツリーの一部としてレンダリングされないという事実に起因します。代わりに、これらは外部オブジェクトとしてレンダリングされるため、ブラウザーがそれらの前後に追加のコンテンツを挿入することはできません。

DOM 構造の例

非対応div や spans などの -replaced 要素、:before および :after コンテンツを DOM 構造に挿入できます。例:

<span><pre class="brush:php;toolbar:false"><before>Before Content</before>
Span Content
<after>After Content</after>

結論

CSS :after プロパティは、置換された要素の固有の特性により、非置換要素に制限されます。要素。これにより、ページ上に表示されるコンテンツの一貫性が確保され、指定された CSS ルールに準拠することが保証されます。

以上がCSS :after が要素の後にコンテンツを追加できないのはどのような場合ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。