How to hide ordered list item's content while keeping the marker via CSS?-CodePudding

We use ordered list to show the steps in the order process:

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

which is styled as follows on the desktop:

1. Products > 2. Customer > 3. Payment

When there is not enough horizontal space, we would like to condense it to (presuming the Customer is the current step):

1. > 2. Customer > 3.

The best way we found up to now, is by adding an artifical spans and hiding them on narrow screens:

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

It is possible to hide the texts even without the spans? How?

PS: Supporting modern browsers (Edge Chromium, Chrome, Safari, Firefox) in recent versions is enough - we do not need to support MSIE nor legacy browsers.

CodePudding user response：

font-size can do the trick if you reset if for ::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>