Css 计算标记和伪元素之前的输出差异答案

【问题标题】：Css counters difference in output for marker and before pseudo elementsCss 计算标记和伪元素之前的输出差异
【发布时间】：2021-06-05 07:23:10
【问题描述】：

我正在阅读这个link 以了解更多关于计数器以及嵌套计数器如何工作的信息，

我有如下的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 伪元素为此列表生成不同的输出。

【问题讨论】：

因为 marker 是一个伪元素，它需要这个实例中的内容。目前标记的样式是有限的。

标签： html css

【解决方案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

【讨论】：