JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ol>

CSS

ol {
	counter-reset: count;
    list-style: none;
    margin: 0;
    padding: 0;
}

ol li {
    position: relative;
    padding-left: 30px;
}

ol li:before {
	content: "0" counter(count);
	counter-increment: count;
    position: absolute;
    text-align: right;
    left: 0;
    width: 20px;
    height: 20px;
    font-size: 20px;
}

/* In case you have more than 9 */
ol li:nth-child(n+10):before {
	content: counter(count);
}