CSS로 OL 목록 번호에 앞자리 0 붙이기 (counter + ::before)
ol 목록의 번호를 01, 02처럼 10 미만에서 앞자리 0을 붙여 표시하는 CSS 방법이다. 기본 번호를 숨기고, ol에 counter-reset으로 카운터를 초기화한 뒤 li의 ::before에서 counter-increment로 증가시키고 content: counter(목록, decimal-leading-zero)로 번호를 생성하는 3가지 구현 방식을 정리했다.
要实现 有序列表（<ol>）的序号小于 10 时前面补零（如 01, 02, ..., 09, 10, 11...），核心思路是：隐藏默认序号，用 CSS 伪元素 ::before 动态生成带前导零的序号。
以下是 3 种主流实现方法，从简单到灵活，覆盖不同场景：
一、最推荐：纯 CSS counter + ::before（无需 JS，兼容性好）
利用 CSS 计数器 counter-reset/counter-increment 统计列表项数量，再通过 ::before 伪元素显示序号，配合 content 拼接前导零。
核心原理：
- counter-reset: list-counter 0：在 <ol> 上初始化计数器，起始值为 0（默认从 1 开始，这里显式设 0 更清晰）。
- counter-increment: list-counter 1：在每个 <li> 上递增计数器，每次 +1。
- content: counter(list-counter, decimal-leading-zero)：用 decimal-leading-zero 格式显示计数器（自动为 1-9 补零）。