<div class="container">
  <article>
    <h1>Automatic Numbering With CSS Counters</h1>

    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, impedit, odit accusamus quidem voluptatum incidunt commodi dolores omnis distinctio quis cumque tempore in beatae vitae sapiente aperiam facere eveniet soluta.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, fugit, cum id voluptates hic debitis autem enim error soluta provident cupiditate nam accusantium natus quisquam quos laudantium esse optio at.
    </p>

    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, recusandae molestias aspernatur dicta magni aperiam cupiditate corporis consequatur. Repellendus, pariatur eaque ad consequatur est veritatis itaque rem repellat dignissimos modi.
    </p>

    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, impedit, beatae animi vitae incidunt voluptatum odit tempora ea aut cumque voluptate culpa rem deserunt repellendus nihil et accusamus quisquam nemo.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, ipsa adipisci corrupti ex dolores illo asperiores saepe labore sint ad sapiente cum ea culpa repellendus voluptates quis consequuntur. Mollitia, delectus.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, veniam nam exercitationem fuga vel id cum similique dolores quibusdam ullam voluptate doloremque atque dolorem consectetur nulla harum numquam reprehenderit eligendi.
    </p>

    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, molestias, fugit sapiente veniam repellat nulla asperiores placeat minima quas facilis repellendus qui officiis quae tenetur ipsum architecto aspernatur vel. Pariatur.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, at velit ratione asperiores maiores inventore beatae animi odio nulla quod perferendis commodi nam sequi ipsa et quis pariatur totam adipisci?
    </p>

    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, voluptatem, ratione, suscipit voluptates quis accusamus nesciunt omnis delectus recusandae consequatur dolore dolores laborum numquam ipsum sequi! Id, quo doloribus voluptas?
    </p>
  </article>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
  background-color: white;
  padding: 1.5em;
}

article {
  counter-reset: my-counter;
}

h3 {
  counter-increment: my-counter;
}

h3:before {
  content: counter(my-counter, upper-roman) ". ";
}