[CSS] ol 要素を使用しないカウントアップするリストを作ってみた

前回のリストマーカー引き続き、CSSで ol タグ相当のCSSクラスを作ってみた。
[CSS]before擬似要素を使って複数行対応のリストマーカーを作ってみた | DevAchieve

また ::before 擬似要素を使っているので CSS3 扱い。
IE8ではコロンをひとつにしないと動かない。
css/list.css CSS list-counter sample page
カウント部分は前回と同じく複数行対応になっている。
Generated content, automatic numbering, and lists にある通り、
本記事では count になっている identifier を初期化しなければならない。

/**
 * list-counter base class
 */
.counter.init {
    counter-reset: count;
}
.count {
    display: block;
    padding-left: 1em;
}
.count::before {
    counter-increment: count;
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}

/**
 * list-counter counter class
 */
.counter.type_decimal .count::before {
    content: counter(count, decimal);
}
.counter.type_decimal_leading_zero .count::before {
    content: counter(count, decimal-leading-zero);
}
.counter.type_lower_roman .count::before {
    content: counter(count, lower-roman);
}
.counter.type_upper_roman .count::before {
    content: counter(count, upper-roman);
}
.counter.type_lower_greek .count::before {
    content: counter(count, lower-greek);
}
.counter.type_upper_greek .count::before {
    content: counter(count, upper-greek);
}
.counter.type_lower_latin .count::before {
    content: counter(count, lower-latin);
}
.counter.type_upper_latin .count::before {
    content: counter(count, upper-latin);
}
.counter.type_lower_alpha .count::before {
    content: counter(count, lower-alpha);
}
.counter.type_upper_alpha .count::before {
    content: counter(count, upper-alpha);
}
.counter.type_armenian .count::before {
    content: counter(count, armenian);
}
.counter.type_georgian .count::before {
    content: counter(count, georgian);
}

upper-greek に関しては W3C の list-style-type プロパティの定義には載っていないのでブラウザ実装依存。
Opera では decimal, Firefox では空白になり、Chrome, Safari, IE9では正常に表示される。