如何通过CSS隐藏有序列表项内容并保留标记，无需额外添加span标签？

可以实现，不需要额外添加span标签，通过CSS自定义计数器+伪元素+媒体查询的组合方案就能实现，完全兼容最新版的现代浏览器，原HTML结构不需要做任何改动。

原HTML结构（无修改） #

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

完整CSS代码 #

/* 全局基础样式：桌面端展示完整文本效果 */
ol {
  /* 清除默认列表样式 */
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 初始化自定义计数器 */
  counter-reset: step-count;
}

li {
  /* 计数器自增 */
  counter-increment: step-count;
  display: flex;
  align-items: center;
}

/* 用伪元素渲染序号，和文本内容分离 */
li::before {
  content: counter(step-count) ". ";
}

/* 用伪元素渲染步骤分隔符，最后一步不需要 */
li:not(:last-child)::after {
  content: " >";
  margin-left: 8px;
}

/* 窄屏响应式样式：比如宽度小于600px时触发压缩效果 */
@media (max-width: 600px) {
  /* 非当前步骤的li设置字体大小为0，隐藏内部文本 */
  li:not(.active) {
    font-size: 0;
  }
  /* 单独给非当前步骤的伪元素设置正常字体大小，保留序号和分隔符 */
  li:not(.active)::before,
  li:not(.active)::after {
    font-size: 1rem; /* 和你的项目全局基础字体大小保持一致即可 */
  }
}

实现原理 #

1. 先取消有序列表的默认序号，用CSS计数器自定义生成步骤序号，通过::before伪元素单独渲染序号，和li标签内的文本内容完全拆分
2. 步骤之间的>分隔符通过::after伪元素渲染，不需要嵌入到HTML文本中
3. 窄屏下仅需要将非active状态的li的字体大小设为0，即可完全隐藏li内的文本内容，再单独给伪元素设置正常字体大小，就能保留序号和分隔符，最终效果和要求完全一致。

内容的提问来源于stack exchange，提问作者alik