隐藏子菜单上的CSS计数器

Question

我正在尝试使用嵌套<ul>创建一个下拉菜单，每<li>个显示一个使用CSS计数器生成的数字。

未悬停时，子菜单会隐藏display:none。

我的问题是，当元素display设置为none时，计数器不会递增。

你知道一个CSS属性来阻止这个吗？

如果我将display: none替换为visibility: hidden，它可以正常工作，但我不确定将它用于我的菜单是否很好，是否有任何陷阱？

Answer 1

您可以通过将display: none设置为0px来模仿font-size（隐藏）行为，这会使元素由计数器属性计数。

.hidden{
    font-size: 0px;
}

Demo

---

或者，上面的一个更复杂的版本（在评论中由Hashem Qolami提到）

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

Demo 2

---

注意： visibility: hidden也可以使用，但会留下相当于输出中一行高度的空格。

Demo using Visibility Property