Versteckte Elemente mit CSS-Zählern zählen

Question

Wie kann ich ein Element nicht vom Zählen ausschließen, wenn es auf display: none; gesetzt ist?

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

 
.hidden { 
 
    display: none; 
 
}

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

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

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

Answer 1

Als .hidden gibt das Element display: none aus diesem Grunde wird der Zähler würde nicht als effektiv nicht in dem dom arbeiten.

Ich würde vielleicht eine Klasse hinzufügen (nur für den Fall .hidden sonst wo nötig display: none zu sein) von:

.hiddenButAccessible { 
    position: absolute; 
    left: -9999px; 
    max-height: 0px; 
    overflow: hidden; 
    opacity: 0; 
} 

hier ist ein funktionierendes Beispiel:

http://codepen.io/sonnyprince/pen/oxqzzL