JSFiddle - React, Tailwind, and code Playground

HTML

<h2>My Items</h2>

<p>
    <ol reversed>
        <li>item 10</li>
        <li>item 9</li>
        <li>item 8</li>
        <li>item 7</li>
        <li>item 6</li>
        <li>item 5</li>
        <li>item 4</li>
        <li>item 3</li>
        <li>item 2</li>
        <li>item 1</li>
    </ol>
</p>
<p>
    <!-- 10 items -->
    <ol class="cp">
        <li>item 10</li>
        <li>item 9</li>
        <li>item 8</li>
        <li>item 7</li>
        <li>item 6</li>
        <li>item 5</li>
        <li>item 4</li>
        <li>item 3</li>
        <li>item 2</li>
        <li>item 1</li>
    </ol>
    <hr />
    <!-- 6 items -->
    <ol class="cp">
        <li>item 6</li>
        <li>item 5</li>
        <li>item 4</li>
        <li>item 3</li>
        <li>item 2</li>
        <li>item 1</li>
    </ol>
    <hr/>
    <!-- 3 items -->
    <ol class="cp">
        <li>item 3</li>
        <li>item 2</li>
        <li>item 1</li>
    </ol>
</p>

CSS

ol.cp {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}
ol.cp li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
}
ol.cp li:before {
    display: inline-block;
    content:"C"counter(item)". ";
    counter-increment: item -1;
    width: 3em;
    margin-left: -2em;
}
ol.cp li:first-child:nth-last-child(1) {
    counter-reset: item 2;
}
ol.cp li:first-child:nth-last-child(2) {
    counter-reset: item 3;
}
ol.cp li:first-child:nth-last-child(3) {
    counter-reset: item 4;
}
ol.cp li:first-child:nth-last-child(4) {
    counter-reset: item 5;
}
ol.cp li:first-child:nth-last-child(5) {
    counter-reset: item 6;
}
ol.cp li:first-child:nth-last-child(6) {
    counter-reset: item 7;
}
ol.cp li:first-child:nth-last-child(7) {
    counter-reset: item 8;
}
ol.cp li:first-child:nth-last-child(8) {
    counter-reset: item 9;
}
ol.cp li:first-child:nth-last-child(9) {
    counter-reset: item 10;
}
ol.cp li:first-child:nth-last-child(10) {
    counter-reset: item 11;
}