<div class="content">
    <h2>Escolha um nome para o counter</h2>    <h2>Incremente o counter</h2>
    <h2>Assinale o counter no seu elemento</h2>
</div>
.content {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  counter-reset: section;
}

h2 {
  color: #222;
}

h2:before {
  counter-increment: section;
  content: counter(section);
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  line-height: 32px;
  width: 32px;
  height: 32px;
  color: #fff;
  font-size: 18px;
  background: #26bcde;
  border-radius: 50%;
  margin-right: 1rem;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.