JSFiddle - React, Tailwind, and code Playground

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

by masbicudo

HTML

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

CSS

.faq {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
.faq > * {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

.faq {
    counter-reset: my-counter 0;
}
.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;
}