Создайте номера строк в Pre с CSS. ⇐ Html

[Anonymous]

Я стараюсь стилизовать код предварительного ящика с номерами строк перед каждой строкой. Я предпочитаю делать это только с CSS. Это то, что я сделал < /p>



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
}< /code>

lorem ipsum
>> lorem ipsum
lorem ipsum,\
lorem ipsum.
>> lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
< /code>
< /div>
< /div>
< /p>

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


Что я делаю не так?>

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