从伪元素中的零开始递增数字，后跟一行

从伪元素中的零开始递增数字，通常是指使用CSS的伪元素（如 ::before 或 ::after）结合CSS计数器（counter）功能来实现的一种排版效果。这种技术常用于列表项的编号或者章节标题的自动编号。

基础概念

CSS计数器是一种CSS功能，允许你在文档中自动递增和显示数字。通过结合伪元素，可以在不修改HTML结构的情况下，在元素的前面或后面添加编号。

类型

递增计数器：最常用的类型，从某个起始值开始递增。
递减计数器：从某个起始值开始递减。
层级计数器：用于表示文档中的层级结构，如章节、小节等。

应用场景

列表编号：为无序列表或有序列表项添加自动编号。
章节编号：在书籍、报告等文档中为章节和小节添加编号。
引用标记：在引用或脚注中使用自动编号。

示例代码

以下是一个简单的示例，展示如何使用CSS计数器和伪元素为列表项添加自动编号：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Counter Example</title>
    <style>
        body {
            counter-reset: section;
        }
        h2::before {
            counter-increment: section;
            content: "Section " counter(section) ". ";
        }
    </style>
</head>
<body>
    <h2>Introduction</h2>
    <p>This is the introduction.</p>
    <h2>Body</h2>
    <p>This is the body.</p>
    <h2>Conclusion</h2>
    <p>This is the conclusion.</p>
</body>
</html>

在这个示例中，我们使用 counter-reset 初始化了一个名为 section 的计数器，并在每个 h2 元素之前使用 counter-increment 和 content 属性来递增并显示编号。