どうも、イソップです。 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>par
![JS不要!CSSでカウント数字のゼロ埋め(ゼロパディング)を実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e92fdc85af7eb9d266248e30babde3081418ac9f/height=288;version=1;width=512/https%3A%2F%2Fwp-blog.yuhiisk.com%2Fwp-content%2Fuploads%2F2018%2F08%2Fyuhiisk1.jpg)