如何在通过CSS保留标记的同时隐藏有序列表项的内容？

Question

我们使用有序列表来显示订购过程中的步骤:

<ol>
<li>Products</li>
<li class="active">Customer</li>
<li>Payment</li>
</ol>

在桌面上的样式如下:

1. Products > 2. Customer > 3. Payment

当没有足够的水平空间,我们想把它(假设顾客当前步骤):

1. > 2. Customer > 3.

到目前为止，我们发现最好的方法是添加人工跨度并将其隐藏在狭窄的屏幕上:

<ol>
<li><span>Products</span></li>
<li class="active"><span>Customer</span></li>
<li><span>Payment</span></li>
</ol>

有可能隐藏文本，即使没有跨度?如何?

PS:支持最新版本的现代浏览器(Edge Chromium, Chrome, Safari, Firefox)就足够了-我们不需要支持MSIE或传统浏览器。

Answer 1

font-size可以在::marker

中重置

li:not(.active) {
font-size:0;
}
li::marker {
font-size:initial;
}

/**/
ol li{
float:left;
padding-right:20px;
}

<ol>
<li>Products</li>
<li class="active">Customer</li>
<li>Payment</li>
</ol>