忘れがちなCSSカウンターのメモ
疑似要素に数字を出力できるCSSコードのメモ。よくリスト等に使う。
基本のソースコード
ul {
counter-reset: number;
li {
&::before {
counter-increment: number;
countent: counter(number);
}
}
}<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>表示形式の設定
表示形式の基本
content: counter(number, 表示形式);表示形式一覧
| 値 | 内容説明 |
|---|---|
| decimal | 数字（1、2、3）※初期値 |
| decimal-leading-zero | 0付き数字（01、02、03） |
| lower-roman | ローマ数字 – 小文字（ⅰ、ⅱ、ⅲ ） |
| upper-roman | ローマ数字 – 大文字（Ⅰ、Ⅱ、Ⅲ ） |
| cjk-ideographic | 漢数字（一、二、三 ） |
| hiragana | ひらがな（あ、い、う ） |
| katakana | カタカナ（ア、イ、ウ ） |
| hiragana-iroha | いろは順（い、ろ、は ） |
| katakana-iroha | イロハ順（イ、ロ、ハ ） |
| lower-latin | アルファベット – 小文字（a、b、c） |
| upper-alpha | アルファベット – 大文字（A、B、C） |
調べると結構あった。個人的に decimal-leading-zero をよく使う