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

[Anonymous]

Я пытаюсь оформить поле предварительного кода с номерами строк перед каждой строкой. Я предпочитаю делать это только с помощью 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
}

Код: Выделить всё

lorem ipsum
>> lorem ipsum
lorem ipsum,\ 
lorem ipsum.
>> lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum

Однако все строки имеют номер 1. Приращение не работает. Вот jsfiddle

• Что я делаю неправильно?
• Какова совместимость браузера с этим решением только на CSS?

Подробнее здесь: https://stackoverflow.com/questions/408 ... h-css-only