JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Custom list counter styles with CSS</title>
 </head>
<body>
<ol class="custom-counter">
 	<li>Item</li>
 	<li>Item</li>
 	<li>Item</li>
 	<li>Item
<ol>
 	<li>Item</li>
 	<li>Item</li>
 	<li>Item</li>
 	<li>Item</li>
</ol>
</li>
 	<li>Item</li>
</ol>
</body>
</html>

CSS

ol {list-style: none; counter-reset: chapter 0;}
ol li+li {counter-increment: chapter 1; list-style: none;}
ol li:nth-of-type(1){font-weight: bold; }
ol li:before {content: counter(chapter) "."; color: green;}

.custom-counter {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.custom-counter li {
  counter-increment: step-counter;
  margin-bottom: 10px;
}

.custom-counter li::before {
	content: counter(step-counter);
	display: inline-block;
	color: white;
	background: blue;
	width: 18px;
  height: 18px;
	margin-right: 20px;
	font-size: 12px;
	line-height: 20px;
  text-align: center;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke: .02em
}