How can I increment the counter in my css code?

Question

In my html code I have the following list defined:

<p class="list">first.</p>
<p class="list">second.</p>

Now, in css I have:

.list {
  display: table;
}
.list:before {
  display: table-cell;
  counter-increment: counter;
  content: counter(counter) '.';
  padding-right: 5px;
}

and the result on the page is:

1. first
1. second

How can I increment the second number to the value of 2?

Answer 1

You should be using counter-reset property on the wrapper of the lists - see demo below:

body {
 counter-reset:counter;
}
.list {
  display: table;
}
.list:before {
  display: table-cell;
  counter-increment: counter;
  content: counter(counter) '.';
  padding-right: 5px;
}

<p class="list">first.</p>
<p class="list">second.</p>