書式
counters(カウンタ名,区切り文字,形状)
対象
after、before疑似要素
継承
-
初期値
-
バージョン
CSS Level 2
対応ブラウザ
Firefox 1.5以降, Opera 8以降
解説
入れ子になったカウンタの値を表示します。
形状は以下のものが指定できます。
| 設定名 |
種類 |
| none |
なし |
| disk |
黒丸 |
| circle |
白丸 |
| square |
黒い四角 |
| decimal |
数字 |
| decimal-leading-zero |
数字（先頭に0を付加） |
| lower-roman |
ローマ数字（小文字） |
| upper-roman |
ローマ数字（大文字） |
| lower-greek |
ギリシャ文字（小文字） |
| lower-alpha |
アルファベット（小文字） |
| upper-alpha |
アルファベット（大文字） |
| lower-latin |
アルファベット/ラテン（小文字） |
| upper-latin |
アルファベット/ラテン（大文字） |
| hebrew |
ヘブライ |
| armenian |
アルメニア語 |
| georgian |
グルジア語 |
| cjk-ideographic |
漢数字 |
| hiragana |
ひらがな |
| katakana |
かたかな |
| hiragana-iroha |
平仮名（いろは順） |
| katakana-iroha |
片仮名（いろは順） |
サンプルコード
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<style type="text/css"><!--
body { margin:0px; }
div { width:300px;height:100px;
border:1px black solid;
}
ol {
list-style-type:none;
counter-reset:num 0;
}
li:before {
content:counters(num,"-") " : ";
counter-increment:num;
}
--></style>
</head>
<body>
<h1>8bitマシンリスト</h1>
<ol>
<li>SHARP</li>
<ol>
<li>MZ-80K</li>
<li>MZ-1200</li>
<li>MZ-700</li>
<li>MZ-1500</li>
</ol>
<li>NEC</li>
<ol>
<li>PC-6001</li>
<li>PC-8001</li>
<li>PC-8801</li>
<li>PC-9801</li>
</ol>
</ol>
</body>
</html>