CODEWITHSUNDEEP
htmlcss
user5372
user5372

Reputation: 175

ol cannot be started from specific count

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;
}

Upvotes: 2

Views: 88

Answers (2)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

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.

Upvotes: 6

olly_uk
olly_uk

Reputation: 11865

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/

Upvotes: 1

Related Questions