cup_of cup_of - 1 year ago 70
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

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?


Answer Source

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>? ]


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download