番号付きリストが「010」になるのを「10」にするCSSは「decimal-leading-zero」です。

完成形のイメージ

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)".";
    }
  }
}

通常の番号付きリストはこちらでも解説していますので、気になる方はどうぞ。

https://sinpe-pgm.com/num-list/

最後に

今回は、CSS カウンターのdecimal-leading-zeroについて解説しました。
この記事があなたの助けやヒントになっていれば幸いです。

最後までありがとうございました。