JSFiddle - React, Tailwind, and code Playground

HTML

<ol id="content">
        <ol>
            <li>sadsad</li>
            <li>fsdfsdfsd</li>
            <li>sadsad</li>
            <li>fsdfsdfsd</li>
        </ol>
    </ol>

CSS

#content ol {
  list-style-type: none;
  margin-left: 0;
}

#content ol > li:before{
    content: counter(customlistcounter) " |";
    counter-increment: customlistcounter;
    margin-left: -21px;
    float: left;
    width: 1em;
}
#content ol li{
    padding-left: 21px;
}
#content ol:first-child {
  counter-reset: customlistcounter;
}