CODEWITHSUNDEEP
htmlhtml-lists
a coder
a coder

Reputation: 7659

Custom <ol> numbering with section numbers

I have several items in an outline each with similarly formatted section numbers.

Ex:

1.3.1
2.1.1
3.4.5

Is there a way to get my ordered lists to recognize "1.1.1" (and "2.1.1", etc) as the starting point?

So a list of releases would appear something like this:

1.1.1 mumbo jumbo
1.1.2 blah blah
1.1.3 something something

Using something like this as the HTML: 

<ol start="1.1.1">
  <li>mumbo jumbo
  <li>blah blah
  <li>something something
</ol>

Is this possible in native HTML/CSS? Obviously the HTML above doesn't work (the iterators revert back to 1, 2, 3).

Upvotes: 1

Views: 1098

Answers (1)

Lal
Lal

Reputation: 14810

See this fiddle

You can do it using CSS counter property

HTML

<ol class="custom">
    <li>mumbo jumbo</li>
    <li>blah blah</li>
    <li>something something</li>
</ol>

CSS

.custom {
    counter-reset: custom;
}
.custom li {
    list-style-type: none;
}
.custom li::before {
    counter-increment: custom;
    content:"1.1." counter(custom)" ";
}

Read more about counter in the docs

and here is an example of counter from W3Schools.

Upvotes: 1

Related Questions