あ。 セレクターを使用してコンテンツを挿入します
h2:before{ content:"前缀"; } h2:after{ content:"后缀"; }
B。 挿入しない個別要素を指定する
h2.sample:before{ content:none; }
2. 画像を挿入する
A. タイトルの前に画像ファイルを挿入します
h2:before{ content:url(anwy.jpg); }
B。 alt 属性の値を画像のタイトルとして表示します (未使用)
img:after{ content:attr(alt); display:block; text-align:center; margin-top:5px; font-size:11px; font-weight:bold; color:black; }
3. 番号を挿入
A. 複数のタイトルの前に連番を追加します
p:before{ content:counter(pCounter); } p{ counter-increment:pCounter; }
B. 箇条書きにテキストを追加
p:before{ content:"第"counter(pCounter)"段"; }
C. 番号のスタイルとタイプを指定します
p:before{ content:counter(pCounter,upper-alpha)'.'; color:blue; font-size:16px; }
D。 番号の入れ子
p:before{ content:counter(pCounter,upper-alpha)'.'; color:blue; font-size:16px; } p{ counter-increment:pCounter; counter-reset:subDivCounter; } p:before{ content:counter(subDivCounter)'.'; margin-left:15px; font-size:12px; } p{ counter-increment:subDivCounter; }
E. stringの両側にあるテキストdot|ローマ字小文字
|数字小文字大文字英語文字|継承継承
以上がCSS3でページにコンテンツを挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。