In our order process, we utilize an ordered list to display the steps in sequence:
<ol>
<li>Products</li>
<li class="active">Customer</li>
<li>Payment</li>
</ol>
On desktop view, it appears as follows:
1. Products > 2. Customer > 3. Payment
In case of limited horizontal space, we aim to simplify it to (assuming Customer is the current step):
1. > 2. Customer > 3.
Our current solution involves introducing artificial spans and hiding them on smaller screens:
<ol>
<li><span>Products</span></li>
<li class="active"><span>Customer</span></li>
<li><span>Payment</span></li>
</ol>
Is there a way to hide the text content without using spans? If so, how can this be achieved?
PS: Our focus is on supporting modern browsers like Edge Chromium, Chrome, Safari, and Firefox in their recent versions, without the need for compatibility with MSIE or older browsers.