CSS counter()関数
例
(本文セレクターで)ページのカウンターを作成します。各<h2>要素のカウンター値をインクリメントし、各<h2>要素の前に「セクション<カウンターの値>:」というテキストを追加します。
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
counter()関数は、指定されたカウンターの現在の値を文字列として返します。
バージョン: | CSS3 |
---|
ブラウザのサポート
Function | |||||
---|---|---|---|---|---|
counter() | Yes | Yes | Yes | Yes | Yes |
CSS構文
counter(countername,
counterstyle)
Value | Description |
---|---|
countername | Required. The name of the counter (which is the same name used for the counter-reset and counter-increment properties) |
counterstyle | Optional. The style of the counter (can be a list-style-type value) |
その他の例
例
カウンターのスタイルを設定します。
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section,
upper-roman) ": ";
}
関連ページ
CSSリファレンス:コンテンツプロパティ
CSSリファレンス:カウンターインクリメントプロパティ
CSSリファレンス:counter-resetプロパティ