html 标题背景色？

Question

如何在标题 (H3) 中设置此数字背景颜色？
我正在使用 Wordpress，我想用背景颜色制作我的产品标题 1/2/3/4。

请帮我做这个。

Answer 1

这是一个让您入门的示例。
这里的主要技巧是 counters.

的用法

counter-reset
counter-increment

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>

html 标题背景色？

html Heading Background color?

html

css

wordpress

heading