CSS3でページにコンテンツを挿入する方法

あ。 セレクターを使用してコンテンツを挿入します

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 サイトの他の関連記事を参照してください。