伪元素使用@counter-style无效，如何实现可独立移动的自定义计数？

尝试为<li>的::after伪元素设置自定义计数器样式，但无法生效；直接将规则应用于<li>选择器时可以正常工作，但这样会导致移动计数元素时整个<li>都跟着移动，不想通过新增HTML元素来实现需求。

代码示例 #

CSS #

main .works ol li::after {
  list-style: icone;
  position: absolute;
}

@counter-style icone {
  system: additive;
  additive-symbols: V 5, IV 4, I 1;
}

HTML #

<section class="works">
  <h2>Fonctionnement</h2>
  <ol>
    <li>Choisissez un restaurant</li>
    <li>Composez votre menu</li>
    <li>Dégustez au restaurant</li>
  </ol>
</section>

list-style属性是专门为列表项（<li>这类元素）设计的，伪元素无法直接通过list-style应用自定义计数器样式。要在伪元素上实现自定义计数，得用CSS计数器的counter()函数配合content属性，具体步骤如下：

• 给父级<ol>设置计数器重置，初始化计数起点
• 给每个<li>设置计数器递增，让每一项的计数依次增加
• 在::after伪元素中，通过content调用自定义计数器样式

修改后的CSS代码：

main .works ol {
  counter-reset: list-counter; /* 重置计数器 */
}

main .works ol li {
  counter-increment: list-counter; /* 每个li递增计数器 */
  position: relative; /* 让伪元素基于li定位 */
}

main .works ol li::after {
  content: counter(list-counter, icone); /* 调用自定义计数器样式 */
  position: absolute;
  /* 可添加left/right等定位属性自由调整计数元素位置，比如left: -25px; */
}

@counter-style icone {
  system: additive;
  additive-symbols: V 5, IV 4, I 1;
}

这样就能在伪元素上渲染出自定义样式的计数器，而且可以自由移动伪元素的位置，不会影响<li>本身的布局。

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