<div class="content">
<h2>
  Titre 1
</h2>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti inventore laborum eaque odio, ipsum earum porro aperiam, veritatis explicabo perferendis dolor cumque maiores! Quos iure odit voluptas ullam commodi sapiente.
  Laborum libero animi similique tenetur quod illum nisi deserunt nobis quisquam alias, ipsa molestiae, quo illo ad aliquid eligendi voluptatem labore autem quas ratione nihil. Quod nam tempora ullam suscipit!
  <h3>
    Sous-titre 1
  </h3>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima blanditiis aperiam, aspernatur explicabo ad expedita commodi voluptatum quam et alias aliquid, sequi, illo ratione consectetur tenetur ipsa deleniti numquam rerum?
  Voluptatum tempore, distinctio dolore ex molestias esse sed. Fuga mollitia, consectetur et molestiae tenetur placeat perferendis rerum nobis adipisci distinctio, ducimus dicta saepe voluptas porro asperiores quisquam. Accusantium, incidunt maxime?
   <h3>
    Sous-titre 2
  </h3>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima blanditiis aperiam, aspernatur explicabo ad expedita commodi voluptatum quam et alias aliquid, sequi, illo ratione consectetur tenetur ipsa deleniti numquam rerum?
  Voluptatum tempore, distinctio dolore ex molestias esse sed. Fuga mollitia, consectetur et molestiae tenetur placeat perferendis rerum nobis adipisci distinctio, ducimus dicta saepe voluptas porro asperiores quisquam. Accusantium, incidunt maxime?
   <h3>
    Sous-titre 3
  </h3>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima blanditiis aperiam, aspernatur explicabo ad expedita commodi voluptatum quam et alias aliquid, sequi, illo ratione consectetur tenetur ipsa deleniti numquam rerum?
  Voluptatum tempore, distinctio dolore ex molestias esse sed. Fuga mollitia, consectetur et molestiae tenetur placeat perferendis rerum nobis adipisci distinctio, ducimus dicta saepe voluptas porro asperiores quisquam. Accusantium, incidunt maxime?
  <h2>
  Titre 2
</h2>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti inventore laborum eaque odio, ipsum earum porro aperiam, veritatis explicabo perferendis dolor cumque maiores! Quos iure odit voluptas ullam commodi sapiente.
  Laborum libero animi similique tenetur quod illum nisi deserunt nobis quisquam alias, ipsa molestiae, quo illo ad aliquid eligendi voluptatem labore autem quas ratione nihil. Quod nam tempora ullam suscipit!
  <h3>
    Sous-titre 1
  </h3>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima blanditiis aperiam, aspernatur explicabo ad expedita commodi voluptatum quam et alias aliquid, sequi, illo ratione consectetur tenetur ipsa deleniti numquam rerum?
  Voluptatum tempore, distinctio dolore ex molestias esse sed. Fuga mollitia, consectetur et molestiae tenetur placeat perferendis rerum nobis adipisci distinctio, ducimus dicta saepe voluptas porro asperiores quisquam. Accusantium, incidunt maxime?
   <h3>
    Sous-titre 2
  </h3>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima blanditiis aperiam, aspernatur explicabo ad expedita commodi voluptatum quam et alias aliquid, sequi, illo ratione consectetur tenetur ipsa deleniti numquam rerum?
  Voluptatum tempore, distinctio dolore ex molestias esse sed. Fuga mollitia, consectetur et molestiae tenetur placeat perferendis rerum nobis adipisci distinctio, ducimus dicta saepe voluptas porro asperiores quisquam. Accusantium, incidunt maxime?
   <h3>
    Sous-titre 3
  </h3>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima blanditiis aperiam, aspernatur explicabo ad expedita commodi voluptatum quam et alias aliquid, sequi, illo ratione consectetur tenetur ipsa deleniti numquam rerum?
  Voluptatum tempore, distinctio dolore ex molestias esse sed. Fuga mollitia, consectetur et molestiae tenetur placeat perferendis rerum nobis adipisci distinctio, ducimus dicta saepe voluptas porro asperiores quisquam. Accusantium, incidunt maxime?
</div>

.content {
  padding: 2rem;
  font-family: sans-serif;
  display:flex;
  flex-direction:column;
  inline-size:50vw;
  counter-reset: count-h2;
}

.content h2 {
    counter-reset: count-h3;
}

.content h2::before, .content h3::before{
  color: white;
  aspect-ratio: 1;
  display: inline-grid;
  place-items: center;
  font-weight: 700:
}

.content h2::before {
  counter-increment: count-h2;
  content: counter(count-h2);
  background-color: orangered;
  border-radius: 50%;
  inline-size: 3rem;
}

.content h3::before {
  counter-increment: count-h3;
  content: counter(count-h2) "." counter(count-h3);
  background-color: royalblue;
  inline-size: 2.4rem;
}