使用 ::before 的 CSS 计数器
使用 CSS 计数器和 counter() 函数创建自动编号系统。
使用 ::before 的 CSS 计数器 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
CSS 计数器是什么
CSS 计数器是由 CSS 维护的变量，其值可以递增并显示在生成的内容中。它们无需 JavaScript 或在 HTML 中手动管理编号，即可实现自动编号。
counter-reset
counter-reset 用于初始化或重置计数器。请将它设置在包含待计数项目的元素上。
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>counter-increment
counter-increment 每次应用时都会将计数器增加 1（默认值）。请将它设置在重复出现的项目上。
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>content 中的 counter() 函数
在伪元素的 content 属性中使用 counter(name)，即可显示当前计数器的值。
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>带样式的步骤计数器
无需 JavaScript 即可创建完整的编号步骤组件：
<div class="steps">
<div class="step">Create an account</div>
<div class="step">Verify your email</div>
<div class="step">Start your first project</div>
</div>计数器初始值
在 counter-reset 中设置自定义起始编号：
<ul class="list">
<li>Item one</li>
<li>Item two</li>
</ul>计数器样式
向 counter() 传入第二个参数，以指定列表样式类型：
<ul class="list" style="list-style:none;padding-left:0;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>使用 counters() 创建嵌套计数器
counters(name, separator)（带有字母 s）可以创建类似“1.1”“1.2”“2.1”的嵌套编号：
<ol>
<li>Chapter one
<ol>
<li>Intro</li>
<li>Details</li>
</ol>
</li>
<li>Chapter two
<ol>
<li>Overview</li>
</ol>
</li>
</ol>在嵌套列表中重置
每个嵌套的 ol 都会继承计数器作用域。counters() 函数会自动使用完整的计数器链。
章节编号
为长文档中的标题自动编号：
<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>使用计数器创建目录
CSS 计数器过去常用于目录和格式化文档。如今这些工作通常由 JavaScript 框架处理，但 CSS 计数器仍然是纯 CSS 方案。
快速检查
哪个属性会在每个匹配元素上递增 CSS 计数器？
回顾
CSS 计数器可以在无需 JavaScript 的情况下实现自动编号。请在容器上使用 counter-reset，在重复项目上使用 counter-increment，并在伪元素的 content 中使用 counter(name) 显示计数器的值。counters() 可配合分隔符处理嵌套编号。
常见问题解答
「使用 ::before 的 CSS 计数器」课时是免费的吗？
是的 — 「使用 ::before 的 CSS 计数器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「使用 ::before 的 CSS 计数器」这节课中我会学到什么？
使用 CSS 计数器和 counter() 函数创建自动编号系统。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「使用 ::before 的 CSS 计数器」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- ::before 与 ::after 内容
- ::placeholder、::selection 与 ::marker
- 使用 ::before 的 CSS 计数器
- 使用伪元素创建装饰图案