CSS - пользовательский список с сохранением десятичного счетчика по умолчанию

Question

Я делаю кастом ol> li, чтобы он выглядел так

1 | Содержание списка

2 | Содержание списка

3 | Содержание списка

Я ссылался на этот пост: HTML + CSS: упорядоченный список без периода?

Но я не могу заставить цифры появляться, и они должны появляться без точек, следуя стандартному числовому счету.

вот мой код:

#content ol > li:before{
    content: counter(customlistcounter) " |";
    counter-increment: customlistcounter;
    margin-left: -21px;
    float: left;
    width: 1em;
}
#content ol li{
    padding-left: 21px;

Answer 1

Вы пропустили пару шагов, чтобы заставить его работать там с CSS;прежде всего добавление: #content ol:first-child { counter-reset: customlistcounter;}.Я настроил пример, чтобы вы могли видеть, как он теперь работает правильно: http://jsfiddle.net/n5wx4/

Как говорит другой автор, хотя помните, что это работает только с несколько более новыми браузерами, поэтому IE 6 и 7 отсутствуют.