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

Question

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

我希望每个白色气泡都是一个 <li>在<ol> ，这样一来，如果我更改它们在 HTML 中的顺序，数字将自动更新。我无法弄清楚如何将数字放入列表项本身，并在其前面添加“Example #”。

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