CodePen Embed - Example of counter(list-item)

<h1>Custom list numbers</h1>

<ol>
  <li>I am an an ordered list</li>
  <li>My markers are styled via ::marker</li>
  <li>The gap size is 1ch</li>
</ol>

li {
  padding-left: 1ch;
}

li::marker {
  content: '[' counter(list-item) ']';
  color: crimson;
  font-weight: bold;
}

This Pen is owned by Šime Vidas on CodePen.

See more by @simevidas on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.