html - 如何使用CSS中的类对问题进行编号

Question

我已经创建了一个问题列表，并计划在将来添加更多问题。我想使用 CSS 对问题进行编号 例如，每个问题都位于下面给出的部分中。

<section class = "question">The Question</section>

有什么方法可以使用“问题”类自动对它们进行编号吗？

Answer 1

是的，您可以使用 :before 伪元素和 CSS 计数器:

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

<section class="question">The Question</section>
<section class="question">The Question</section>
<section class="question">The Question</section>
<section class="question">The Question</section>

您可以在 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters 阅读有关 CSS 计数器的更多信息。和 http://www.w3.org/TR/CSS2/generate.html#generate.html#counters