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

Ответ 1

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

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

counter-reset: line;

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

Из W3C Specs:

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

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

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

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

Опять из W3C Specs:

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

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

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

Почему создается счетчик на родительском компьютере?

Когда счетчик создается на уровне тега pre, счетчик затем передается каждому из его дочерних элементов (то есть каждый span и, в свою очередь, каждый span:before будет знать или наследовать этот счетчик), и теперь инструкции increment в 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>

Ответ 2

Вам нужно увеличить line в своем диапазоне:

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

Посмотрите на этот обновленный jsfiddle.

Ответ 3

Привет, вам нужно reset счетчик на предыдущем/выше загруженном элементе, проверьте https://jsfiddle.net/n2xkgt7s/2/ pre { counter-reset: line; }