CSS :after 特定の要素にコンテンツを追加しない
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="image.png" />
ログイン後にコピー
img:after {
content: "After";
}ログイン後にコピー
これは、:after が置換された要素の外観を変更できないためです。
以上がCSS `:after` が画像や入力などの置換された要素にコンテンツを追加しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
静的フォームプロバイダーの比較
Apr 16, 2025 am 11:20 AM
ここでは、「静的フォームプロバイダー」という用語を埋めてみましょう。あなたはあなたのHTMLを持ってきます
SASSをより速くするための概念の証明
Apr 16, 2025 am 10:38 AM
新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。
セクション要素との取引
Apr 12, 2025 am 11:39 AM
2つの記事がまったく同じ日に公開されました。
HTMLダイアログ要素を使用したいくつかの実践
Apr 16, 2025 am 11:33 AM
これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです
マルチサムスライダー：一般的なケース
Apr 12, 2025 am 10:52 AM
この2部構成のシリーズの最初の部分では、2つの親指スライダーを取得する方法を詳しく説明しました。今、私たちは＆＃039; llが一般的なマルチサンプスのケースを見ていますが、別のものと
See all articles
