Счетчик CSS в скрытом подменю

Question

Я пытаюсь создать выпадающее меню, используя вложенный <ul>, каждый <li>, отображающий число, сгенерированное с помощью счетчиков CSS.

Подменю скрыты с display:none, когда не парили.

Моя проблема заключается в том, что счетчики не увеличиваются, когда элемент имеет display, установленный в none.

Знаете ли вы свойство CSS, чтобы предотвратить это?

Если я заменил display: none на visibility: hidden, он работает, но я не уверен, приятно ли это использовать для моего меню, есть ли какие-либо ловушки?

Answer 1

Вы можете имитировать поведение display: none (скрытое), установив font-size в 0px, и это заставит элемент подсчитываться свойством counter.

.hidden{ 
    font-size: 0px; 
} 

Demo

---

Или, немного более сложная версия выше (упоминается Hashem Qolami в комментариях)

.hidden{ 
    font: 0/0 a; 
    visibility: hidden; 
} 

Demo 2

---

Примечание:visibility: hidden также будет работать, но он оставил бы пространство, эквивалентное высоте одной строки на выходе.

Demo using Visibility Property