完成形のイメージ
See the Pen 番号付きリスト01~10 by shimpei (@shimpei) on CodePen.
HTML
適当にリストを作ります。クラス名はnum-list
にしました。
<div class="container">
<ul class="num-list">
<li>Python</li>
<li>JavaScript</li>
<li>Java</li>
<li>C++</li>
<li>C#</li>
<li>Go</li>
<li>Ruby</li>
<li>Swift</li>
<li>TypeScript</li>
<li>PHP</li>
<li>HTML</li>
<li>CSS</li>
<li>Perl</li>
<li>Rust</li>
<li>Objective-C</li>
<li>Kotlin</li>
<li>Scala</li>
<li>Haskell</li>
<li>Shell</li>
<li>SQL</li>
</ul>
</div>
SCSS
SCSSはこんな感じです。
.num-list {
counter-reset: number 0;
> li {
&::before {
counter-increment: number;
content: counter(number, decimal-leading-zero) ".";
}
}
}
通常の番号付きリストのSCSS
通常の番号付きリストはこのようなSCSSで指定しているかと思います。
.num-list {
counter-reset: number;
>li {
&:before {
counter-increment: number;
content: counter(number)".";
}
}
}
通常の番号付きリストはこちらでも解説していますので、気になる方はどうぞ。
最後に
今回は、CSS カウンターのdecimal-leading-zero
について解説しました。
この記事があなたの助けやヒントになっていれば幸いです。
最後までありがとうございました。