) などの特定の要素でのみ機能し、画像 (![]()
) やフォーム入力 () などの置換された要素では機能しないようです。 ).
: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="image.png" />
img:after {
content: "After";
}
これは、:after が置換された要素の外観を変更できないためです。
以上がCSS `:after` が画像や入力などの置換された要素にコンテンツを追加しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
