JSFiddle - React, Tailwind, and code Playground

(SOPT) É possível calcular o número de elementos com CSS?

HTML

<ol class="faq" reversed>
    <li>
        <dt>Como colocar o umbigo pra dentro?</dt>
        <dd>Aperte o umbago com o dedão. Fonte: Wikipedia.</dd>	
    </li>
    <li>    
        <dt>Onde eu baixo um processador dual core?</dt>
        <dd>AMD ou IBM?</dd>
    </li>
    <li>    
        <dt>Carne vermelha faz mal, carne branca faz mal, o que devo comer?</dt>
        <dd>Carne humana.</dd>
    </li>
    <li>    
        <dt>Quando devo falar sobre sexo com meu cachorro?</dt>
        <dd>Quando ele entrar na puberdade.</dd>
    </li>
</ol>

CSS

.faq {
    zzcounter-reset:my-counter 0; /* É possível calcular o número de dt's? */
    list-style-type: decimal-leading-zero;
}
.faq dd {
    margin: 0 0 50px;
}
.faq dt:before {
    content: counter(my-counter, decimal-leading-zero) ".";
    font: bold 50px/1 Sans-Serif;
    left: 0;
    position: absolute;
    top: 5px;
}
.faq dt, .faq dd {
    padding-left: 90px;
}
.faq dt {
    counter-increment: my-counter +1;
    font: bold 16px Georgia;
    padding: 4px 0 10px 90px;
    position: relative;
}
body {
    padding: 20px;
    background-color: #eee;
}

JavaScript

var reset = 'my-counter '+ $('.faq dt').length;
//$('.faq').css( 'counter-reset', reset );