仅使用 CSS 在 pre 上创建行号

Question

我尝试用每行前面的行号设置代码预框的样式。我更喜欢只用 CSS 来做。这就是我所做的

pre {
  background: #303030;
  color: #f1f1f1;
  padding: 10px 16px;
  border-radius: 2px;
  border-top: 4px solid #00aeef;
  -moz-box-shadow: inset 0 0 10px #000;
  box-shadow: inset 0 0 10px #000;
}
pre span {
  display: block;
  line-height: 1.5rem;
}
pre span:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888
}

<pre>
  <span>lorem ipsum</span>
  <span>&gt;&gt; lorem ipsum</span>
  <span>lorem ipsum,\ </span>
  <span>lorem ipsum.</span>
  <span>&gt;&gt; lorem ipsum</span>
  <span>lorem ipsum</span>
  <span>lorem ipsum</span>
  <span>lorem ipsum</span>
</pre>

但是，所有行的数字都是1。增量不起作用。这是一个jsfiddle

我做错了什么？
浏览器与此 CSS 唯一解决方案的兼容性如何？

Answer 1

为什么计数器不递增？

您没有在父标记级别重置或创建计数器。如果将以下行添加到 pre 选择器，代码将正常运行。当您不在父级别创建计数器（使用 counter-reset）时，每个元素都会创建自己的计数器，然后递增它。

counter-reset: line;

何时创建计数器？

来自W3C Specs:

The counter-reset property creates new counters on an element.

The counter-set and counter-increment properties manipulate the value of existing counters. They only create new counters if there is no counter of the given name on the element yet.

在这种情况下，我们没有使用 counter-reset 属性创建计数器，因此 counter-increment 属性在 span:before 伪元素选择器将创建一个给定名称的计数器并递增它。

计数器如何知道当前值？

再次来自 W3C Specs:

If an element has a previous sibling, it must inherit all of the sibling’s counters. Otherwise, if the element has a parent, it must inherit all of the parent’s counters. Otherwise, the element must have an empty set of counters.

The element then inherits counter values from the immediately preceding element in document order.

这里因为计数器只在伪元素中创建，它的父元素（span）不知道它的创建，所以这个span的兄弟姐妹不会继承柜台。因为它甚至没有继承任何计数器，所以它也没有从前面的元素中获取当前值。

为什么在父级工作时创建计数器？

当在 pre 标记级别创建计数器时，计数器将传递给它的每个子元素（即每个 span，然后每个 span:before 会知道或继承这个计数器），现在 span:before 中的增量语句只会增加它从父级接收的计数器的值。

现在，由于每个 span 都从其前一个兄弟继承 line 计数器，它们还将从文档顺序中的前一个元素继承当前值，因此它会从 1 一直上升到 2 , 3 等等

为什么在跨度或预工作上使用反增量？

如您所料，计数器递增属性创建当没有现有计数器时创建一个新计数器因此在 span 上添加 counter-increment: line 将在遇到的第一个跨度上创建一个计数器。现在，由于 span 的每个兄弟都继承了这个计数器，它不会每次都创建一个新的，而只是继承前一个元素的值。因此这种方法可行，但最好使用 counter-reset 语句显式创建计数器。

浏览器支持情况如何？

浏览器对 CSS 计数器的支持非常好。在 CSS 和 support for it is available even in IE8.

中这不是新事物

演示：

pre {
  background: #303030;
  color: #f1f1f1;
  padding: 10px 16px;
  border-radius: 2px;
  border-top: 4px solid #00aeef;
  -moz-box-shadow: inset 0 0 10px #000;
  box-shadow: inset 0 0 10px #000;
  counter-reset: line;
}
pre span {
  display: block;
  line-height: 1.5rem;
}
pre span:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888
}

<pre><span>lorem ipsum</span>
<span>&gt;&gt; lorem ipsum</span>
<span>lorem ipsum,\ </span>
<span>lorem ipsum.</span>
<span>&gt;&gt; lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
</pre>

Answer 2

您必须在跨度中增加 line：

pre span {
    display: block;
    line-height: 1.5rem;
    counter-increment: line;
}

看看这个更新的jsfiddle。

Answer 3

您好，您需要重置上一个/更高加载项的计数器，查看 https://jsfiddle.net/n2xkgt7s/2/ pre { counter-reset: line; }

仅使用 CSS 在 pre 上创建行号

Create line numbers on pre with CSS only

html

css

css-counter