プロパティ | 値 | 備考 |
---|---|---|
content: | normal【none と同じ】 | none【疑似要素の生成なし】 | [ 《string【文字列】》 | 《url【URL】》 | 《counter【カウンタ】》 | attr(<identifier>) | open-quote【開始引用符】 | close-quote【終了引用符】 | no-open-quote【開始引用符 (挿入なし)】 | no-close-quote【終了引用符 (挿入なし)】 ] + | |
content: | [ [ 《image【画像】》 | 《url【URL】》 ] ',' ] *[ normal【疑似要素では生成なし】 | none【疑似要素では生成なし】 | <content-list【コンテンツリスト】> ] [ / 《string【文字列】》 ] ? | |
<content-list【コンテンツリスト】> | [ 《string【文字列】》 | contents | 《url【URL】》 | <quote【引用符】> | document-url | <target> | leader()【リーダー】 ] + | |
<quote【引用符】> | [ open-quote【開始引用符】 | close-quote【終了引用符】 | no-open-quote【開始引用符 (挿入なし)】 | no-close-quote【終了引用符 (挿入なし)】 ] | |
<target> | [ target-counter() | target-counters() | target-text() ] | |
leader()【リーダー】 | leader( dotted【点線】 | solid【実線】 | space【スペース】 | 《string【文字列】》 ); |
<style>
.ex:before { content: open-quote "(前)"; color: red; font-weight: bold; }
.ex:after { content: "(後)" close-quote; color: blue; font-weight: bold; }
</style>
<span class="ex"> コンテンツ </span>
コンテンツ
プロパティ | 値 | 備考 |
---|---|---|
counter-reset: | [ <identifier【カウンタ識別子】> 《integer【リセット値 (省略:0)】》? ] +| none【リセットなし】 | カウンタのリセット (リセット値は負数も可) |
counter-increment: | [ <identifier【カウンタ識別子】> 《integer【加算値 (省略:1)】》? ] +| none【更新なし】 | カウンタの更新 (加算値は 0 または 負数も可) |
counter()【単一カウンタ】使用
<style>
#div1 { counter-reset: header4; }
h4 { counter-reset: header5; }
h4:before {
content: counter(header4) ":";
counter-increment: header4;
color: red; }
h5 { counter-reset: header6; }
h5:before {
content: counter(header4) "-" counter(header5, upper-alpha) ":";
counter-increment: header5;
color: red;
}
h6:before {
content: counter(header4) "-" counter(header5, upper-alpha) "-" counter(header6, lower-alpha) ":";
counter-increment: header6;
color: red;
}
</style>
<div id="div1">(header4 = 0)
<h4>ヘッダ4 (++header4 / header5 = 0)</h4>
<h4>ヘッダ4 (++header4 / header5 = 0)</h4>
<h5>ヘッダ5 (++header5 / header6 = 0)</h5>
<h4>ヘッダ4 (++header4 / header5 = 0)</h4>
<h5>ヘッダ5 (++header5 / header6 = 0)</h5>
<h6>ヘッダ6 (++header6)</h6>
<h6>ヘッダ6 (++header6)</h6>
<h5>ヘッダ5 (++header5 / header6 = 0)</h5>
<h6>ヘッダ6 (++header6)</h6>
<h6>ヘッダ6 (++header6)</h6>
</div>
counters()【複数カウンタ】使用
<style>
/* exB クラスの子孫の ol要素 ( E F【子孫 結合子】 参照) */
.exB ol { counter-reset: item; list-style-type: none; }
/* exB クラスの子孫の li要素 */
.exB li:before { content: counters(item, "-") ":"; counter-increment: item; color: red; }
</style>
<div class="exB">
<ol>
<li>項目 ( item[0] = 0 / ++item[0] )
<li>項目 ( ++item[0] )
</ol>
<ol>
<li>項目 ( item[0] = 0 / ++item[0] )
<li>項目 ( ++item[0] )
<ol>
<li>項目 ( item[1] = 0 / ++item[1] )
<li>項目 ( ++item[1] )
</ol>
<li>項目 ( ++item[0] )
<ol>
<li>項目 ( item[1] = 0 / ++item[1] )
<ol>
<li>項目 ( item[2] = 0 / ++item[2] )
<li>項目 ( ++item[2] )
<li>項目 ( ++item[2] )
</ol>
<li>項目 ( ++item[1] )
<ol>
<li>項目 ( item[2] = 0 / ++item[2] )
<li>項目 ( ++item[2] )
<li>項目 ( ++item[2] )
</ol>
</ol>
</ol>
</div>
構文 | 備考 |
---|---|
counter ( <identifier【カウンタ識別子】> [ , <list-style-type【リストマーカー種類】> ] )戻り値:指定した【リストマーカー種類】の【カウンタ識別子】カウンタの文字列 | 単一カウンタ |
counters ( <identifier【カウンタ識別子】>, 《string【セパレータ】》 [ , <list-style-type【リストマーカー種類】> ] )戻り値:指定した【リストマーカー種類】の【カウンタ識別子】カウンタを【セパレータ】で区切った文字列 | 複数カウンタ |