125naroom / デザインするところ(会社)です。

【CSS】counter-incrementを使って擬似要素をリスト化する

【CSS】counter-incrementを使って擬似要素をリスト化する

ワードプレスのランキング表示で役立ったメモ。
擬似要素でリスト化する。

サンプル

1段目/1からはじまる
2段目/0からはじまる
3段目/01からはじまる
4段目/001からはじまる

See the Pen
CSS / counter-increment
by 125naroom (@125naroom)
on CodePen.

CSS

1からはじまる

div section {
  counter-increment: section;
}
div section:before {
  content: counter(section);
}

0からはじまる

div section:nth-of-type(1) {
  counter-reset: section;
}
div section:not(:nth-of-type(1)) {
  counter-increment: section;
}
div section:before {
  content: counter(section);
}

01からはじまる

div section {
  counter-increment: section;
}
div section:before {
  content: counter(section, decimal-leading-zero);
}

001からはじまる

div section {
  counter-increment: section;
}
div section:before {
  content: '0' counter(section, decimal-leading-zero);
}
div section:nth-of-type(99) ~ section:before {
  content: counter(section, decimal-leading-zero);
}

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

JANAI COFFEE
  • 2023.03.24New
  • JANAI COFFEE
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
ちょっと思い出しただけ
【CSS】『shape-outside』でテキストの回り込みを円形にしてみる