博客中如何自动让H2成为有序列表（ol li）

Question

我想将博客中的标题 (H2) 设为列表项。标题由段落分隔。我正在使用 Wordpress，在我的博客编辑器中，无法使 H2 成为列表。所以我想要一个 CSS 代码添加到我的主题中。我需要的代码结果可能类似于图像中显示的结果（给出的链接），其中它不是 H2 行，而是转换为列表。

我只有 ol 和 ul 项目的代码，如下所示：

/*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;
}

输出是这样的：

Answer 1

你的选择器需要一些调整，像这样；

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>