ホームページ > 記事 > ウェブフロントエンド > css3のafterのcontent属性には何を入れられますか
css3のafterのcontent属性には何を入れられますか
- WBOYオリジナル
- 2022-06-07 17:07:023026ブラウズ
css3 の ":after" 疑似要素の content 属性: 1. null 値なしに設定します; 2. null 値なしとみなされます通常に設定します; 3. Counter はカウンターを設定しますおよび生成されたコンテンツ 擬似クラス要素で指定された名前の最小範囲の数です; 4. 文字列テキストコンテンツに設定します; 5. 引用符の前に "open-quote" に設定します; 6. " に設定しますclose-quote" を引用符の後に付けるなど。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3 の after の content 属性
content 属性は、コンテンツを挿入するために :before および :after 擬似要素と組み合わせて使用されます。
構文形式:
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
可能な値:
none コンテンツを null 値に設定します。
normal は、:before および :after 擬似クラス要素では none として扱われます。つまり、null 値でもあります。
counter はカウンターを設定します。形式は counter(name) または counter(name,style) です。生成されるコンテンツは、疑似クラス要素の指定された名前の最小範囲のカウントです。形式はスタイルによって指定されます (デフォルトは '10 進数' - 10 進数です)
attr(attribute) 要素の属性を変更します。attribute は文字列として返されます。 。
- #string テキストの内容を設定します
- open-quote 前に引用符を設定します
- close-quote set Back quotes
- no-open-quote コンテンツの開始引用符を削除します
- no-close-quote コンテンツの終了引用符を削除しますcontent
- url(url) 特定のメディア（画像、音声、ビデオなど）のリンクアドレスを設定します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
p:before {
content:"天王盖地虎- ";
}
p#testID:before {
content:none;
}
</style>
</head>
<body>
<p>宝塔镇河妖</p>
<p id="testID">强的很！！！</p>
</body>
</html>出力結果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
</head>
<body>
<p>天王盖地虎-宝塔镇河妖</p>
</body>
</html>出力結果:
css ビデオ チュートリアル)
以上がcss3のafterのcontent属性には何を入れられますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。