JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list-numbered">
    <h2>Style Numbered List With CSS</h2>
    <ol>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
        <li>List 6</li>
    </ol>
    <div>

CSS

* {margin: 0; padding: 0}
		
body {font-family: arial;}

.list-numbered {
    width: 400px;
    margin: 100px auto;
}

.list-numbered h2 {margin-bottom: 30px;}

ol {
    list-style:none;
    counter-reset:mycounter;
    padding:0;
}
ol li {
    position:relative; 
    margin-left: 30px;
    padding:5px 0;
}
ol li:before {
    content:counter(mycounter); 
    counter-increment:mycounter;
    position:absolute;
    top:0;
    left:-30px;
    width:25px;
    height:25px;
    line-height:25px;
    border-radius:50%;
    color:#fff;
    background:teal;
    text-align:center;
}