忘れがちな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 をよく使う