JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<ol id="id" class="ui-sortable">
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>
</ol>

CSS

#id li p:after {
    float: right;
    content: 'nom';
}

    #id li:nth-child(-n+6) p:after { /*this means first 6*/
        content: 'Nom';
        color: blue;
    }

    #id li:nth-child(-n+3) p:after {/*this means first 3 and since it comes second it has precedence over the previous for the common elements*/
        content: 'OM';
        color: pink;
    }