cup_of cup_of - 2 months ago 12
CSS Question

How to start an ordered list at specific number if using psuedo elements?

Hello I have a page that consists of three ordered lists, there is content in between them so it is necessary to split them up into three different lists. I would like to control the number that the second and third ordered list starts with. I am using a psuedo

:before
for my ordered list so I can customize the numbers.

Here is my CSS:

.postid-1028 ol {
counter-reset: item;
list-style: none;
}

.postid-1028 ol li {
padding-left: 55px;
}

.postid-1028 ol li:before {
content: counter(item) ". ";
counter-increment: item;
left: 20px;
}


Is it possible with some css or jquery to start the second list at a number of my choice like 7 instead of 1?

Thanks!

Answer

You can define a number increment in your ol element.

The counter-reset function has an optional integer value (0 by default), which you can use to start counting from that number:

counter-reset: [ <identifier> <integer>? ]


CODE SNIPPET:

ol {
  list-style: none;
  counter-reset: my-counter 6;
}
li {
  counter-increment: my-counter;
}
li::before {
  content: counter(my-counter);
}
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>