Создание номеров строк на pre только с помощью CSS

почему счетчик не увеличивается?

вы не сбрасываете или не создаете счетчик на уровне родительского тега. Если вы добавите следующую строку в pre селектор, код будет работать нормально. Когда вы не создаете счетчик (используя counter-reset) на родительском уровне каждый элемент будет создавать свой собственный счетчик, а затем увеличивать его.

counter-reset: line;

---

когда создается счетчик?

от спецификации W3C:

свойство counter-reset создает новые счетчики на элементе.

свойства counter-set и counter-increment управляют значением существующих счетчиков. Они только создавать новые счетчики, если на элементе еще нет счетчика с заданным именем.

в этом случае происходит то, что мы не создали счетчика с помощью counter-reset свойство и так далее counter-increment собственность в span:before селектор псевдо-элемента создаст счетчик заданного имени и увеличит его.

---

как счетчик узнает текущее значение?

опять спецификации W3C:

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

далее элемент наследует значения счетчика из непосредственно предшествующего элемента в порядке документа.

здесь так как счетчик создается только в псевдо-элементе, его родитель (span) не знает о его создании и поэтому братья и сестры этого span не наследует счетчик. Поскольку даже не наследует никакого счетчика, он также не получает текущее значение из предыдущего элемента.

---

почему создание счетчика на родительской работы?

когда счетчик создается в pre уровень тега, счетчик затем передается на каждый из его дочерних элементов (то есть каждый span и по очереди каждый span:before будет знать или наследовать этот счетчик) и теперь операторы инкремента в span:before будет только увеличиваться значение счетчика, которое он получил от родителя.

теперь с каждого span наследует line счетчик от своего предыдущего брата, они также будут наследовать текущего значения от предыдущего элемента в порядке их следования в документе и, таким образом, это продолжается от 1 до 2, 3 и т. д.

---

почему использование приращения счетчика на промежутке или предварительной работе?

как вы уже догадались, свойство counter-increment создает новый счетчик, если нет счетчика и так добавлять counter-increment: line на span создаст счетчик на первом промежутке, который встречается. Теперь, так как каждый брат span наследует этот счетчик, он не создает новый каждый раз и скорее просто наследует значение из предыдущего элемента. Таким образом, этот подход будет работать, но всегда лучше создать счетчик явно с помощью counter-reset заявление.

---

как поддержка браузера?

поддержка браузера для счетчиков CSS невероятно хороша. Это не новая вещь в CSS и поддержка для него доступна даже в IE8.

---

Demo:

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>