如何用CSS计数器让不可修改的带链接列表仅显示数字？

要实现无法修改原有链接列表结构、仅显示数字作为分页按钮，同时保留链接可导航性且不使用JavaScript的需求，可通过CSS计数器完成：

实现思路 #

1. 初始化CSS计数器，为每个列表项递增计数
2. 借助伪元素::before将计数器值作为分页数字展示
3. 隐藏原链接的文本内容，只保留生成的数字标识

CSS 代码 #

.wz-pages ul {
  counter-reset: wz-counter;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1em; /* 分页按钮间的间距 */
}
.wz-pages li {
  counter-increment: wz-counter;
}
.wz-pages li a {
  font-size: 0; /* 隐藏原链接文本 */
  text-decoration: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wz-pages li a::before {
  content: counter(wz-counter);
  font-size: 1rem; /* 恢复数字的字体大小 */
  color: #333;
}
/* 可选：添加hover效果优化交互 */
.wz-pages li a:hover::before {
  color: #fff;
  background-color: #007bff;
}

对应HTML结构 #

<div class="wz-pages">
  <ul>
    <li>
      <a href="page1.html">第一页</a>
    </li>
    <li>
      <a href="page2.html">第二页</a>
    </li>
    <li>
      <a href="page3.html">第三页</a>
    </li>
    <li>
      <a href="page4.html">第四页</a>
    </li>
    <li>
      <a href="page5.html">第五页</a>
    </li>
  </ul>
</div>

说明 #

• 无需改动原有HTML结构，仅需为父容器添加指定CSS类即可生效
• 链接的完整可点击区域保留，完全不影响页面导航功能
• 通过flex布局实现分页按钮横向排列，可根据需求调整间距、边框、颜色等样式

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