html - 使用 css 计数器如何创建一个可以设置计数器初始值的类？

Question

使用 CSS 计数器，是否可以设置一个在 :before 中显示计数器的类，但是否为每次使用该类设置该计数器的初始值？

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

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

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

Answer 1

您可以为 counter-reset 提供任意起始值，但您需要使用其内联 style 对每个 pre 元素执行此操作code> 属性，你需要提供一个比你想要的起始行号小 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>

正如您所想象的那样，这是令人难以置信的 hacky(我在这里不是指您对行号的实现，因为这不是您问题的重点，而且我的陈述适用于任何使用 CSS 计数器的实现，无论多么强大)，但没有其他纯 CSS 解决方案(您甚至可以考虑使用内联样式“不是纯 CSS”，这是完全可以理解的)。这就是为什么大多数实现以某种形式或形式使用 JavaScript 以使其对最终用户(作者)来说更容易一些。

---

如果只有浏览器支持具有 content 以外的属性的 attr()，这将变得完全微不足道，但唉，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>