<article>
  <section>
    🥔
  </section>
  <section>
    🥦
  </section>
  <section>
    🍎
  </section>
  <section>
    🍉
  </section>
  <section>
    🍌
  </section>
</article>

body {
  background-image: linear-gradient(320deg, lime 0%, olivedrab 70%);
  font-family: sans-serif;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
}

article {
  /* <name-of-the-counter> <new-initial-value> */
  counter-reset: section 7;
}

section {
  counter-increment: section
}

section::before {
  content: counter(section)'.';
}