css3のafterのcontent属性には何を入れられますか-フロントエンドQ&A-php.cn

css3のafterのcontent属性には何を入れられますか

WBOY

リリース： 2022-06-07 17:07:02

オリジナル

3065 人が閲覧しました

css3 の ":after" 疑似要素の content 属性: 1. null 値なしに設定します; 2. null 値なしとみなされます通常に設定します; 3. Counter はカウンターを設定しますおよび生成されたコンテンツ擬似クラス要素で指定された名前の最小範囲の数です; 4. 文字列テキストコンテンツに設定します; 5. 引用符の前に "open-quote" に設定します; 6. " に設定しますclose-quote" を引用符の後に付けるなど。

css3のafterのcontent属性には何を入れられますか

このチュートリアルの動作環境: 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>

ログイン後にコピー

出力結果:

css3のafterのcontent属性には何を入れられますか

例は次のとおりです。

<!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>

ログイン後にコピー

出力結果:

css3のafterのcontent属性には何を入れられますか