Compter les éléments cachés avec les compteurs CSS - css, css-counter

Comment ne pas exclure un élément du décompte s'il est défini? display: none;?

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>

Réponses:

Comme le .hidden donne l'élément display: none C’est pourquoi le compteur ne fonctionnerait pas, car il n’est pas utilisé dans le pays.

J'ajouterais peut-être une classe (juste en cas .hidden sinon où il fallait être display: none) de:

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

voici un exemple de travail:

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