如何在 CSS 中使用 class 对问题进行编号

Question

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

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

有什么方法可以使用 "question" class 自动给它们编号吗？？

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 and http://www.w3.org/TR/CSS2/generate.html#generate.html#counters

阅读更多关于 CSS 计数器的信息

如何在 CSS 中使用 class 对问题进行编号

how to number questions using class in CSS

html

css

css-counter