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 Item list 1 Item list 2 Section 2 Item list 3 ...