CSS `:after` が画像や入力などの置換された要素にコンテンツを追加しないのはなぜですか?

CSS :after 特定の要素にコンテンツを追加しない

CSS :after プロパティは、ドキュメント ツリー内の要素の後にコンテンツを挿入するために使用されます。 。ただし、段落 (

) や表 (

) などの特定の要素でのみ機能し、画像 (<img src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="CSS `:after` が画像や入力などの置換された要素にコンテンツを追加しないのはなぜですか?" >) やフォーム入力 () などの置換された要素では機能しないようです。 ).

:after と :before の許容性を決定するものプロパティ?

:after と :before の動作は、置換された要素の機能が異なるという事実によって決まります。置換された要素とは、画像、プラグイン、フォーム要素などの外部リソースによって外観と寸法が定義された要素です。

CSS 仕様によれば、:before と :after は置換されていない要素でのみ機能します。これは、置き換えられた要素の前後にコンテンツを追加するためにこれらを使用することはできないことを意味します。

Span を使用した例

次の HTML を考えてみましょう:

<span>Content of span</span>

次の CSS を使用すると:

span:before {
  content: "Before";
}

span:after {
  content: "After";
}

このシナリオの DOM は次のようになります。 this:

<span>
  <before>Before</before>
  Content of span
  <after>After</after>
</span>

この構造は、:before と :after が非置換要素の前後にコンテンツを挿入する方法を示しています。

画像の例外

ただし、画像で :after を使用しても同じ結果は得られませんresult:

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="CSS `:after` が画像や入力などの置換された要素にコンテンツを追加しないのはなぜですか?" >

img:after {
  content: "After";
}

これは、:after が置換された要素の外観を変更できないためです。

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