How to automatically make H2 to be an ordered list (ol li) in a blog

Question

I want to make the headings (H2) in a blog a list item. The heading is separated by paragraphs. I'm using Wordpress and in my blog editor, there is no ability to make H2 be a list. So I want a CSS code to add to my theme. The code outcome I need can be something like the one shown in the image (link given) where instead of an H2 line, it's converted to a list. Here is the link to the image

I only have a code for ol and ul items as shown below:

/*I tried this:*/

h2:before {
  content: counter(mylist) ". ";
  font-weight: bold;
  color: blue;
}
h2:before {
  counter-increment: list-number;
  content: counter(list-number);
  
  margin-right: 10px;
  margin-bottom:10px;
  width:35px;
  height:35px;
  display:inline-flex;
  align-items:center;
  justify-content: center;
  font-size:16px;
  background-color:#d7385e;
  border-radius:50%;
  color:#fff;
}

And the output is this: enter image description here

Answer 1

Your selectors need some adjusting, like so;

h2 {
  counter-increment: list-number;
  display: flex;
  align-items: center;
}

h2:before {
  content: counter(list-number);
  margin-right: 1em;
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-color: #d7385e;
  border-radius: 50%;
  color: #fff;
}

<h2>lorem</h2>
<h2>lorem</h2>
<h2>lorem</h2>