有什么方法可以仅使用 CSS 将元素的索引（子编号）作为文本插入到元素中？

Question

我的objective是逐行打印一个文本文件，在开头追加行号。像这样：

<div id="wrapper">
  <div class="line">1: asdf</div>
  <div class="line">2: asdfasdf</div>
  <div class="line">3: asdfasdfasdfasdf</div>
  <div class="line">4: asdf</div>
</div>

n 是 CSS 中的一个变量，负责元素在其父元素和子选择器中的索引，您可以对其执行操作，例如。 nth-child(2n + 3)

有没有办法获取这个变量并将其作为纯文本插入？基本上是这样的：

.line:before {
  content: n;
}

我知道我可以使用我正在使用的 SASS 来完成此操作，我只是想知道是否有某种方法可以使用 vanilla CSS.

来实现它

Answer 1

是的，您可以使用 CSS 个计数器来做到这一点。 CSS 计数器可以在遇到匹配的选择器时创建和递增。对于这种情况，我们可以在 .wrapper 元素级别创建一个计数器，然后在遇到新的 .line 元素时递增计数器值。

counter-reset 属性用于创建计数器，而 counter-increment 用于增加值。然后可以通过 content 属性将计数器的值赋给伪元素，值为 counter(counter-name).

正如 Aaron Lavers 在他的评论中指出的那样，CSS 计数器并不是新事物，而是 supported from IE8 itself。

#wrapper {
  counter-reset: line-number;
}
.line {
  counter-increment: line-number;
}
.line:before {
  content: counter(line-number)": ";
}

<div id="wrapper">
  <div class="line">asdf</div>
  <div class="line">asdfasdf</div>
  <div class="line">asdfasdfasdfasdf</div>
  <div class="line">asdf</div>
</div>

我们还可以为输出值设置样式，将值增加一个大于 1 的数字，从基值开始为一个不同于 0 的数字等。

.wrapper {
  counter-reset: line-number 2; /* specifying a number in counter-reset means set the starting value as that number */
}
.line {
  counter-increment: line-number 2; /* specifying a number in counter-increment means increment the counter by that much every time */
}
.line:before {
  content: counter(line-number, lower-roman)": "; /* the second parameter represents the style of the output value */
}

#wrapper2.wrapper .line:before {
  content: counter(line-number, decimal-leading-zero)": ";
}

<h3>Lower Roman Style with Base Value as 2 and increments of 2</h3>
<div id="wrapper" class="wrapper">
  <div class="line">asdf</div>
  <div class="line">asdfasdf</div>
  <div class="line">asdfasdfasdfasdf</div>
  <div class="line">asdf</div>
</div>

<h3>Decimal Leading Zero Style with Base Value as 2 and increments of 2</h3>
<div id="wrapper2" class="wrapper">
  <div class="line">asdf</div>
  <div class="line">asdfasdf</div>
  <div class="line">asdfasdfasdfasdf</div>
  <div class="line">asdf</div>
</div>

有什么方法可以仅使用 CSS 将元素的索引（子编号）作为文本插入到元素中？

Is there any way to insert an element's index (child number) as text within the element solely using CSS?

css

variables

selector

css-counter