html标题背景颜色？

【问题标题】：html Heading Background color?html标题背景颜色？
【发布时间】：2021-11-16 15:58:16
【问题描述】：

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

请帮我做这个。

【问题讨论】：

您好，欢迎来到 Stackoverflow！你的问题需要澄清。您是否询问有关如何获取数字 1（绿色）的背景颜色并将其应用于其他标题标签的说明？
您想要自定义 html 和 css 的解决方案吗？

标签： html css wordpress heading

【解决方案1】：

这是一个帮助您入门的示例。
这里的主要技巧是使用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>

【讨论】：

非常感谢 LSE :)