Question

section.slide [data-fragment-index] {
  counter-increment: my-counter;
}

这就是结果：

确定要获得

1, 2, 3, 4, and 5，我得到1, 3, 3, 4, and 5。

发生了什么？我想这与嵌套元素有关，但我看不到解决方案。 there是一个codepen，证明了问题：

https：//codepen.io/jmuheim/pen/wbnqegm？editors =1100

section.slide [data-fragment-index] {
  counter-increment: my-counter;
}

.fragment {
  position: relative;
}

.fragment::after {
  position: absolute;
  top: 3px;
  right: 5px;
  content: counter(my-counter);
  background-color: #f28b48;
  border-radius: 50%;
  border: 2px solid #fff;
  width: 16px;
  font-weight: bold;
  height: 16px;
  text-align: center;
  color: #fff;
}

<section class="slide">
  <p class="fragment" data-fragment-index="0">A paragraph</p>
  <ul>
    <li class="fragment" data-fragment-index="0">A list item

      <ul>
        <li class="fragment" data-fragment-index="1">A nested list item</li>
      </ul>
    </li>
    <li class="fragment" data-fragment-index="2">Another list item
  </ul>
  <p class="fragment">Last paragraph</p>
</section>

记住，一个pseudo元素是在其所有子元素之后出现的，因此提出的计数器值是该元素的末尾。 trory将另一个孩子放在那里，您会看到柜台进入4，等等。

本摘要相反，使用pseudo元素，在这种情况下，计数是您想要的 - 尚未被所有孩子递增的计数器。

after

Answer 1

li