Number Headings - CSS

The counter function in conjunction with counter-* properties to number for headings.

DEMO

Metallica

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius.

Megadeth

Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia.

Slayer

Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim.

Deep Purple

Picta aliquam porro maxime minima sed a ullam, aspernatur corporis.

HTML

<div class="listNum">
<h2>Metallica</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius.</p>
<h2>Megadeth</h2>
<p> Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia.</p>
<h2>Slayer</h2>
<p>Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim.</p>
<h2>Deep Purple</h2>
<p>Picta aliquam porro maxime minima sed a ullam, aspernatur corporis.</p>

CSS

body {
  counter-reset: heading;
}
.listNum h2:before {
  content: counter(heading)". ";
  counter-increment: heading;
}