counters

書式

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>
実際のサンプルを実行する