我有一个带链接的列表，不能修改。有没有办法让列表只显示数字，以便把它样式化成分页？

这些链接是真正指向页面的链接，所以我需要保持它们仍然可导航。我不能添加JavaScript。必须用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::before {
  content: counter(wz-counter);
}

<div class="wz-pages">
  <ul>
    <li>
      <a href="#">Lorem</a>
    </li>
    <li>
      <a href="#">Ipsum</a>
    </li>
    <li>
      <a href="#">Dolor</a>
    </li>
    <li>
      <a href="#">Sit</a>
    </li>
    <li>
      <a href="#">Amet</a>
    </li>
  </ul>
</div>

解决方案

这似乎可行：

.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::before {
   content: counter(wz-counter);
   visibility: visible;
}

.wz-pages li a {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  visibility: hidden;
}

<div class="wz-pages">
  <ul>
    <li>
      <a href="#">Lorem</a>
    </li>
    <li>
      <a href="#">Ipsum</a>
    </li>
    <li>
      <a href="#">Dolor</a>
    </li>
    <li>
      <a href="#">Sit</a>
    </li>
    <li>
      <a href="#">Amet</a>
    </li>
  </ul>
</div>

备选方案

这里还有一个想法：

.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::before {
   content: counter(wz-counter);
}

.wz-pages li a {
 display: grid; /* force the line break */
 /* show only one line */
 height: 1lh;
 overflow: hidden;
 /* center the number */
 justify-content: unsafe center;
 text-align: center;
 /* adjust the size like you want */
 width: 1em;
}

<div class="wz-pages">
  <ul>
    <li>
      <a href="#">Lorem</a>
    </li>
    <li>
      <a href="#">Ipsum</a>
    </li>
    <li>
      <a href="#">Dolor</a>
    </li>
    <li>
      <a href="#">Sit</a>
    </li>
    <li>
      <a href="#">Amet</a>
    </li>
  </ul>
</div>