CSS to add leading zero to an ordered list custom counter

Question

What I have:

An ordered list with a custom counter:

ol {
  /*list-style-type:decimal-leading-zero;*/
  list-style: none;
  padding-left: 0px;
  counter-reset: item;
}

ol>li {
  display: table;
  counter-increment: item;
}

ol>li:before {
  display: table-cell;
  padding: 0 0.5em 0 0;
  content: counter(item) ".";
  font-weight: bold;
}

<ol>
  <li>List item one.</li>
  <li>List item two.</li>
  <li>List item three.</li>
  <li>List item four.</li>
  <li>List item five.</li>
  <li>List item six.</li>
  <li>List item seven.</li>
  <li>List item eight.</li>
  <li>List item nine.</li>
  <li>List item ten.</li>
</ol>

What I need:

A leading zero before any list item numbered less than 10.

I.e. 01, 02, 03, 04, 05, 06, 07, 08, 09, 10.

My question:

How can I achieve the required leading zero via CSS?

Answer 1

From: Sven Wolfermann via CodePen

You can add a leading zero by including decimal-leading-zero to your li:before{ content: counter(...); }

li:before {
  counter-increment: li;
  content: counter(item, decimal-leading-zero);
}