html Heading Background color?-CodePudding

How can I make this number background color in heading (H3)? I'm using Wordpress and I want to make my product heading 1/2/3/4 with the background color. Please help me to make this. enter image description here

CodePudding user response：

Here's a example to get you started.
The main trick here is the usage of the counters.

counter-reset
counter-increment

counter()

section {
  counter-reset: test;
}

section h3 {
  counter-increment: test;
  position: relative;
  padding-left: 40px;
}

section h3::before {
  content: counter(test) ".";
  position: absolute;
  top: -4px;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: green;
  color: white;
}

<section>
  <h3>Section 1 Title 1</h3>
  
  <h3>Section 1 Title 2</h3>
  
  <h3>Section 1 Title 3</h3>
</section>

<section>
  <h3>Section 2 Title 1</h3>
</section>