書式
counter(カウンタ名,形状)
対象
after、before疑似要素
継承
-
初期値
-
バージョン
CSS Level 2
対応ブラウザ
Firefox 1.5以降, Opera 8以降
解説
カウンタの値を表示します。contentプロパティと組み合わせて使います。
形状は以下のものが指定できます。
| 設定名 |
種類 |
| 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;
}
h1:before { counter-increment:num;
content:"第" counter(num) "章：" }
--></style>
</head>
<body>
<h1>はじめに</h1>
<div>Sample Text</div>
</body>
</html>