CSS: ol 要素の先頭番号のデザインを変更する

画像は使いません。

(1) 参考サイトに載っていたもの

1. This is the first item
2. This is the second item
3. This is the third item
4. This is the fourth item
5. This is the fifth item
6. This is the sixth item

<ol class="custom-counter">
  <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>

.custom-counter {
  margin-left: 0;
  padding-right: 0;
  list-style-type: none;
}
.custom-counter li {
  counter-increment: step-counter;
}
.custom-counter li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(200,200,200);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

(2) 赤丸にしてみる

1. This is the first item
2. This is the second item
3. This is the third item
4. This is the fourth item
5. This is the fifth item
6. This is the sixth item

<ol class="custom-counter2">
  <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>

.custom-counter2 {
  margin-left: 0;
  padding-right: 0;
  list-style-type: none;
}
.custom-counter2 li {
  counter-increment: step-counter;
  padding-bottom: 5px;
}
.custom-counter2 li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: red;
  color: white;
  font-weight: bold;
  padding: 3px 9px;
  border-radius: 18px;
}

参考

• Customize Your Ordered Lists with CSS and the ::before Pseudo- Element