How to do css style for ordered list numbers?

Question

I try to change the style of the Ordered list numbers using CSS, but I got some wrong outcomes.

<ol>
  <li>This is the first item</li>
  <li>This is the second item</li>
  <li>This is the third item</li>
  <li>This is the fourth item</li>
  <li>This is the fifth item</li>
  <li>This is the sixth item</li>
</ol>

CSS

ol li {
  counter-increment: step-counter;
  margin-bottom: 10px;
  list-style-type: none;
}

ol li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0,200,200);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 15px;
}

The above code displays 2 List numbers (One Default and the other is my defined style). The output is like

1. 1. This is my first item
2. 2. This is my second item

So, why it occurs double times. Please help to get that as single time (the second one is my defined style)

Answer 1

custom-counter is an invalid selector and even if it was valid, it would be pointing to nothing. Just remove that whole ruleset and then add list-style-type: none; to the <ol> as in:

ol {list-style-type: none;}

Assign position:relative to all <li> and position:absolute to each li::before in order to have granular control over all bullet distances from text.

li {
  position: relative;
...
}

li::before {
...
  position: absolute;
  top: -1px;
  /* Adjust < -number | number+ > */
  left: -32px;
...

 :root { font: 400 16px/1.25 Verdana } ol { list-style-type: none; } ol li { counter-increment: step-counter; position: relative; margin: 10px 0 0 0; } ol li::before { content: counter(step-counter); display: block; position: absolute; top: -1px; /* Adjust < -number | number+ > */ left: -32px; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; background-color: rgb(0, 200, 200); color: white; font-weight: bold; font-size: 0.8rem; text-align: center; border-radius: 15px; }

 <ol> <li>This is the first item</li> <li>This is the second item</li> <li>This is the third item</li> <li>This is the fourth item</li> <li>This is the fifth item</li> <li>This is the sixth item</li> </ol>

Answer 2

My simple solution to style list numbers: put everything inside the <li> in a span, then style the span differently than the <li> itself.

HTML:

<ol>
<li><span>List item</span></li>
<li><span>List item</span></li>
<li><span>List item</span></li>
</ol>

CSS:

li {
  color: red;
  font-weight: bold;
}

li span {
  color: black;
  font-weight: normal;
}