如何仅用CSS和HTML实现列表计数器的可点击功能

不用JavaScript就能实现这个需求，核心思路是放弃原生的::marker伪元素，改用自定义伪元素结合锚点链接来模拟可点击的编号计数器，具体实现如下：

完整代码示例 #

CSS 样式 #

/* 重置有序列表默认样式，去掉原生编号并初始化计数器 */
ol {
  list-style: none;
  counter-reset: list;
  padding-left: 0;
}

/* 为每个列表项递增计数器，同时预留编号空间 */
ol > li {
  counter-increment: list;
  position: relative;
  padding-left: 30px;
}

/* 用锚点链接的伪元素生成带括号的编号，设置点击交互样式 */
ol > li > .counter-link::before {
  content: '('counter(list, decimal) ')';
  position: absolute;
  left: 0;
  cursor: pointer;
  color: blue;
  text-decoration: underline;
}

HTML 结构 #

<ol>
  <li id="MyID">
    <a href="#MyID" class="counter-link"></a>
    A
  </li>
  <li id="MyID2">
    <a href="#MyID2" class="counter-link"></a>
    B
  </li>
</ol>

关键说明 #

1. 先重置有序列表的原生样式，去掉自带编号，同时初始化自定义计数器。
2. 给每个列表项设置相对定位，左侧预留空间用于放置自定义编号。
3. 在每个列表项内添加锚点链接，链接地址指向当前列表项的id（如果需要跳转到外部页面锚点，直接把href改成完整URL即可，比如href="www.mysite.domain/page#MyID"）。
4. 通过锚点链接的::before伪元素生成带括号的计数器文本，并用绝对定位把它固定在列表项左侧，点击这个区域就会触发锚点跳转。

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