设置有序列表的样式，并将数字放在列表项中

Question

我想知道是否可以使用HTML中的<ol>完成类似于下面屏幕截图的效果。

我希望每个白色气泡在<li>中都是<ol>，这样如果我在HTML中更改其顺序，则数字会自动更新。我无法弄清楚如何将数字放在列表项本身，并在它之前添加“示例＃”。

Answer 1

您需要使用CSS counters。

body {
  counter-reset: section;                   /* Set the section counter to 0 */
}
h3::before {
  counter-increment: section;               /* Increment the section counter*/
  content: "Section" counter(section) ": "; /* Display the counter */
}