「:after」が置換された要素にコンテンツを追加しないのはなぜですか?

なぜ :after は一部の要素にコンテンツを追加し、他の要素には追加しないのですか?

CSS :after 疑似要素は、コンテンツを追加することを目的としています。要素のドキュメント ツリーの内容。ただし、この機能は特定の要素に対してのみ一貫して機能することが観察されています。この動作を理解するには、置換される要素の概念を調べる必要があります。

CSS 仕様によれば、置換される要素とは、画像、プラグイン、フォームなどの外部リソースによって外観と寸法が定義される要素のことです。要素。対照的に、非置換要素とは、その視覚的特性が CSS またはブラウザのデフォルトのスタイルによって制御される要素です。

重要なことに、:before と :after は非置換要素でのみ機能します。これは、画像、置換されたフォーム コントロール、およびその他の置換された要素に、これらの疑似要素を使用してコンテンツを追加できないことを意味します。

この制限の根拠は、置換された要素には通常、事前に定義されたサイズと外観があるためです。そのため、コンテンツの前後に追加のコンテンツを挿入することは現実的ではありません。代わりに、置換された要素の視覚的特性は通常、ソース コードまたは CSS スタイルを通じて制御されます。

たとえば、次の HTML と CSS は段落要素の前後にコンテンツを追加しますが、画像に対しては機能しません。 :

<p><span>Before</span>Paragraph Content<span>After</span></p>
<img src="image.jpg"/><span>After Image</span>

p:before {
  content: "Before: ";
}

p:after {
  content: " After";
}

img:after {
  content: "After Image";
}

置換された要素の概念を理解することで、:after が特定の要素に対して機能するのに他の要素には機能しない理由を説明でき、その動作が意図されたものであることが明らかになります。ブラウザ間で一貫性があります。

以上が「:after」が置換された要素にコンテンツを追加しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。