JS不要！CSSでカウント数字のゼロ埋め（ゼロパディング）を実装する

どうも、イソップです。

CSSの「counter-increment」というプロパティをご存知でしょうか。
JavaScriptを使わなくても、CSSだけでカウント表示ができるプロパティです。

今日はcounter-incrementを応用した、カウント数字のゼロ埋め（ゼロパディング）の方法を詳解します。

counter-incrementとcontentプロパティを上手く使います

まずはデモを見てみましょう。見出しのh2タグにカウント数字を表示します。

See the Pen oYywrK by Youhei Isokawa (@yuhiisk) on CodePen.

できとるやんけ！
では早速詳しく見てみましょう。

HTMLは見出しと段落が続く、よくありそうな構造にしてます。

<div class="content">
  <h2 class="heading"></h2>
  <p>paragraph</p>
  <h2 class="heading"></h2>
  <p>paragraph</p>
  <h2 class="heading"></h2>
  <p>paragraph</p>
  <h2 class="heading"></h2>
  <p>paragraph</p>
  ...
</div>

次にCSSです。

h2.heading {
  counter-increment: heading;
}
/* ゼロを頭につける */
h2.heading:after {
  content: '0' counter(heading);
}
/* 10以上はゼロを取る */
h2.heading:nth-of-type(9) ~ h2:after {
  content: counter(heading);
}
/* 最後だけ文字を変える */
h2.heading:last-of-type:after {
  content: 'finish!' !important;
}

1. counter-incrementにキーワードを指定します。
2. :after疑似要素のcontentプロパティに、'0'を追加します。
3. h2タグが10個以上あったら、contentプロパティの'0'を取り除いて再定義します。
4. 最後だけ文字を変えたい場合は、:last-of-typeセレクタが便利です。

実に簡単ですね。

今回は1〜9に0を付けましたが、応用すれば001〜099なども出来ます。