CSS计数器：标记和before伪元素输出差异

Question

我正在学习计数器和嵌套计数器的使用，参考链接。

以下为我的CSS和HTML代码：

<style>
   ol {
      counter-reset: my-counter 0;
      list-style-type: none;
   }
   li::before {
     content: counters(my-counter, '.'); 
     counter-increment: my-counter;
   }
</style>

使用HTML标记

<ol>
  <li> First
     <ol>
        <li> Eleven </li>
        <li> Twelve </li>
     </ol>
  </li>
  <li> Second
    <ol>
       <li> Twenty-one </li>
       <li> Twenty-two </li>
    </ol>
  </li>
</ol>

我如预期地获取到了内容，例如1和1.1，但是将before更改为伪元素marker，即li::marker会给出0和0.0的值。

但当我只使用这个css时，输出结果与预期相同。

   li::marker {content: counters(list-item, '.') ' ';}

我不明白为什么在这个列表中，before和marker伪元素产生了不同的输出。

- Cloverr

---

由于标记是伪元素，因此在这种情况下需要内容。目前标记的样式受到限制。 - Paulie_D

Answer 1

问题与::marker内允许的属性有关。允许使用content但不允许使用counter-increment，因此它可以工作但计数器不会递增。

如果将递增放到li中，它就可以工作：

ol {
  counter-reset: my-counter 0;
  list-style-type: none;
}

li::marker {
  content: counters(my-counter, '.');
}

li {
  counter-increment: my-counter;
}

<ol>
  <li> First
    <ol>
      <li> Eleven </li>
      <li> Twelve </li>
    </ol>
  </li>
  <li> Second
    <ol>
      <li> Twenty-one </li>
      <li> Twenty-two </li>
    </ol>
  </li>
</ol>

更多有关允许使用的属性的详细信息可以在规范中找到：https://www.w3.org/TR/css-lists-3/#marker-properties。

- Temani Afif