Использование счетчиков CSS

Question

Как я могу подсчитать элемент, если каждый из них вложен в элемент sepereate?

.variant--name::before { 
 
     counter-increment: section; 
 
     content: "Abschnitt " counter(section) ": "; 
 
    }

<div class="variant--group"> 
 
<h3 class="variant--name">variant</h3> 
 
</div> 
 

 
<div class="variant--group"> 
 
<h3 class="variant--name">variant</h3> 
 
</div> 
 

 
<div class="variant--group"> 
 
<h3 class="variant--name">variant</h3> 
 
</div>

Answer 1

Также нужно counter-reset

body { 
 
    counter-reset: section; 
 
} 
 
.variant--name::before { 
 
    counter-increment: section; 
 
    content: "Abschnitt " counter(section)": "; 
 
}

<div class="variant--group"> 
 
    <h3 class="variant--name">variant</h3> 
 
</div> 
 
<div class="variant--group"> 
 
    <h3 class="variant--name">variant</h3> 
 
</div> 
 
<div class="variant--group"> 
 
    <h3 class="variant--name">variant</h3> 
 
</div>

Edit: Вы можете создать родителю элемент и использовать counter-reset на него, так что теперь для каждого parent элемент вы создаете новый экземпляр счетчика Fiddle вместо сбросного счетчика на корпусе Fiddle