JSFiddle - React, Tailwind, and code Playground

by Guilherme Moura Nascimento

HTML

<section><!-- Contexto -->
    <p>Bacon ipsum dolor amet short loin drumstick short ribs ham hock doner. Ribeye flank pork belly, meatball kevin brisket bresaola chuck cupim pastrami biltong. </p>
    <p>Bacon ipsum dolor amet short loin drumstick short ribs ham hock doner. Ribeye flank pork belly, meatball kevin brisket bresaola chuck cupim pastrami biltong. </p>   
    <p>Bacon ipsum dolor amet short loin drumstick short ribs ham hock doner. Ribeye flank pork belly, meatball kevin brisket bresaola chuck cupim pastrami biltong. </p>
</section>

CSS

section {
    counter-reset: escopo /* escopo que será incrementado */
}

p:before {
    content: counter(escopo) " - "; /* Sim você pode concatenar */
    counter-increment: escopo; /* indica que escopo será incrementado */
    font-weight: bold;
    background-color:  red;
    color: #fff;
}