Continue ordered list numbering automatically

Basic HTML structure is

<h2>Section 1</h2>
<ol>
  <li>Item list 1
  <li>Item list 2
</ol>
<h2>Section 2</h2>
<ol>
  <li>Item list 3
  <li>Item list 4
</ol>  

Our goal is to do numbering through all list items. We do it with CSS counter properties.

body {
 counter-reset: rule;
}
ol {
 list-style: none;
 padding-left: 40px;
}

ol>li:before {
 counter-increment: rule;
 content: counter(rule) ". ";
 float: left;
 margin-left:-30px;
 width: 20px;
 text-align: right;
}

First, define our counter 'rule' on body element level.
Then disable standard numbering by setting list-style to 'none'.
Next create a number before each list item using CSS content property and incrementing counter.
Other CSS rules are used to make numbering look similar to standard.

Result:

Section 1

1. Item list 1
2. Item list 2

Section 2

1. Item list 3
2. Item list 4