Есть ли способ вставить индекс элемента (дочерний номер) в виде текста внутри элемента исключительно с помощью CSS?

Моя цель состоит в том, чтобы напечатать текстовый файл строка за строкой и добавить номер строки в начале. Вот так: 

<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, который я использую, мне просто интересно, если есть какой-то способ сделать это с помощью ванильного CSS.

1 8
css css3 css-counter

1 ответ:

Да, вы можете сделать это с помощью счетчиков CSS. Счетчики CSS могут быть созданы и увеличены при обнаружении соответствующего селектора. В этом случае мы можем создать счетчик на уровне элемента .wrapper, а затем увеличивать значение счетчика всякий раз, когда встречается новый элемент .line.

Свойство counter-reset используется для создания счетчика, а свойство counter-increment - для увеличения значения. Затем значение счетчика может быть присвоено псевдо-элементу через свойство content с значение как counter(counter-name).

Как отмечает Аарон Лейверс в своем комментарии, счетчики CSS не являются чем-то новым и поддерживаются самим IE8. 

#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>
9