Continue ordered list numbering automatically

Basic HTML structure is

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

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;
 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.


Section 1

  1. Item list 1
  2. Item list 2

Section 2

  1. Item list 3
  2. Item list 4