JSFiddle - React, Tailwind, and code Playground

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

by brasofilo

HTML

<dl class="faq">	
    <dt>Como colocar o umbigo pra dentro?</dt>
    <dd>Aperte o umbago com o dedão. Fonte: Wikipedia.</dd>	
    
    <dt>Onde eu baixo um processador dual core?</dt>
    <dd>AMD ou IBM?</dd>	
    
    <dt>Carne vermelha faz mal, carne branca faz mal, o que devo comer?</dt>
    <dd>Carne humana.</dd>

    <dt>Quando devo falar sobre sexo com meu cachorro?</dt>
    <dd>Quando ele entrar na puberdade.</dd>
</dl>

CSS

.faq {
    counter-reset:my-counter 3; /* É possível calcular o número de dt's? */
}
.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 );