ol cannot be started from specific count

Question

For reasons of styling I use an ol element with pseudo classes. Unfortunately I cannot start counting the list items from a desired index. What is wrong?

js fiddle

HTML

<ol start="14">
    <li>car</li>
    <li>flower</li>
    <li>garden</li>
    <li>shool</li>
    <li>river</li>
</ol>

CSS

ol {
    width: 850px;
    padding: 0;
    margin: 0 auto;
    counter-reset: item;
    list-style-type: none;
    font-size: 18px;
    line-height: 23px;
    font-weight: 400;
    font-style: normal;
}
li:before {
    content: counter(item)" ";
    counter-increment: item;
}

possible duplicate of [Is it possible to specify a starting number for an ordered list with CSS?](http://stackoverflow.com/questions/779016/is-it-possible-to-specify-a-starting-number-for-an-ordered-list-with-css) — Niels Abildgaard, Jan 07 '15 at 11:41
@NielsAbildgaard Not really a duplicate. This question is regarding CSS counters. — Madara's Ghost, Jan 07 '15 at 11:42
@Second Rikudo The `start` attribute is irrelevant when using counters. That confused me. I see the difference. — Niels Abildgaard, Jan 07 '15 at 11:45
`counter-reset` takes a number: http://jsfiddle.net/h4m5utr8/4/ — Niels Abildgaard, Jan 07 '15 at 11:47

Ilya Streltsyn · Accepted Answer · 2015-01-07T11:58:42.880

6

You can specify the start value in counter-reset:

counter-reset: item 13;

Unfortunately, current browsers don't support accessing to the attribute values, so something like counter-reset: item calc(attr(start) - 1); won't work. You have to set the value explicitly.

edited Jan 07 '15 at 11:58

answered Jan 07 '15 at 11:45

Ilya Streltsyn

13,076
2
37
57

score 1 · Answer 2 · answered Jan 07 '15 at 11:46

1

The issue is that you are resetting the index with the css rule counter-reset: item

To get your desired results use counter-reset: item 13

check out teh updated fiddle here : http://jsfiddle.net/h4m5utr8/3/

answered Jan 07 '15 at 11:46

olly_uk

11,559
3
39
45

ol cannot be started from specific count

2 Answers2