<h2> alternative

In this example, we use the same scenario presented in the Number HTML elements automatically with CSS tutorial where we want to automatically number the steps in a tutorial where the steps are listed as <h2> elements followed by text in various suitable HTML elements (paragraphs, etc). Rather than manually number them, we can do the following:

h2 {
  counter-increment: h2counter;
  display: list-item;
}

h2::marker {
  display: list-item;
  content: counter(h2counter) ". ";
}

body {
  counter-reset: h2counter;
}

Further example

In this second example, we want to automatically “label” the verses in a poem “Verse 1”, “Verse 2” etc.

The HTML:

<h1>Funeral Blues by W.H. Auden</h1>

<p>Stop all the clocks, cut off the telephone,<br>
Prevent the dog from barking with a juicy bone,<br> 
Silence the pianos and with muffled drum<br> 
Bring out the coffin, let the mourners come.</p>

<p>Let aeroplanes circle moaning overhead<br> 
Scribbling on the sky the message He Is Dead,<br> 
Put crepe bows round the white necks of the public doves,<br> 
Let the traffic policemen wear black cotton gloves.</p> 

<p>He was my North, my South, my East and West,<br> 
My working week and my Sunday rest,<br> 
My noon, my midnight, my talk, my song;<br> 
I thought that love would last for ever: I was wrong.</p> 

<p>The stars are not wanted now: put out every one;<br> 
Pack up the moon and dismantle the sun;<br> 
Pour away the ocean and sweep up the wood;<br> 
For nothing now can ever come to any good.</p>

The CSS:

p {
  counter-increment: p;
  display: list-item;
}

p::marker {
  content: "Verse " counter(p) ": ";
  color: DarkGray;
}

body {
  counter-reset: p;
  margin: 100px;
}

Results in: