使用 css 计数器如何创建可以设置计数器初始值的 class？

Question

使用 CSS 计数器，是否可以设置一个 class 在 :before 中显示一个计数器，但每次使用 [= 时都要设置该计数器的初始值20=]?

例如，如果我使用下面的 css 和 html 显示行号，我可以创建一个 class 让我说行号从 7 开始吗而不是 1，或者，我是否必须为每个我想以不同初始计数器值开始的块创建一个唯一的 class？

pre { counter-reset: line; }
code{ counter-increment: line; }
code:before{ content: counter(line); }

<pre><code>Line of code</code></pre>

Answer 1

属性值可以包含计数器的名称和初始值：

counter-reset: line 999

https://www.w3.org/wiki/CSS/Properties/counter-reset

Answer 2

您可以为 counter-reset 提供任意起始值，但您需要使用其内联 style 属性对每个 pre 元素执行此操作，并且您需要提供比您想要的起始行号小 1 的数字：

pre { counter-reset: line; }
code { counter-increment: line; }
code::before { content: counter(line); float: left; margin: 0 1ch; }

<pre style="counter-reset: line 6"><code>Line of code</code></pre>

如您所想，这非常骇人听闻（我在这里指的不是您对行号的实现，因为这不是您问题的重点，而且我的陈述适用于任何使用 CSS 计数器虽然强大），但没有其他仅 CSS 的解决方案（您甚至可以考虑使用内联样式 "not CSS-only"，这是完全可以理解的）。这就是为什么大多数实现以某种形式或形式使用 JavaScript 以使最终用户（作者）更容易使用的原因。

如果只有浏览器支持 attr() 且属性不是 content，这将变得完全微不足道，但是唉，they don't，所以下面的假设解决方案不会工作：

pre { counter-reset: line; }
pre[data-line] { counter-reset: line calc(attr(data-line integer) - 1); }
code { counter-increment: line; }
code::before { content: counter(line); float: left; margin: 0 1ch; }

<pre data-line="7"><code>Line of code</code></pre>

使用 css 计数器如何创建可以设置计数器初始值的 class？

Using css counters how do I create a class that can have the initial value of the counter set?

html

css

css-counter