【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.

「1」からはじまる

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

HTMLとCSSはこちら

HTML

<div>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</div>

CSS

/*=======
1 2 3 4 5 ...
=======*/
div section {
  counter-increment: section;
}
div section:before {
  content: counter(section);
}

「0」からはじまる

See the Pen 【CSS】counter-incrementを使って擬似要素をリスト化する(1からはじまる) by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</div>

CSS

/*=======
0 1 2 3 4 ...
=======*/
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」からはじまる

See the Pen 【CSS】counter-incrementを使って擬似要素をリスト化する(0からはじまる) by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</div>

CSS

/*=======
01 02 03 04 05 ...
=======*/
div section {
  counter-increment: section;
}
div section:before {
  content: counter(section, decimal-leading-zero);
}

「001」からはじまる

See the Pen 【CSS】counter-incrementを使って擬似要素をリスト化する(01からはじまる) by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</div>

CSS

/*=======
001 002 003 004 005 ...
=======*/
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);
}

さいごに

そうそう、これこれー
このサイトの人気ランキングで使ってますよー
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

5

/

22

2024

Googleさんの
おすすめ

5

/

22

2024

デザインの記事

UNBOX 2nd
  • 2024.05.20New
  • UNBOX 2nd
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
早朝始発の殺風景