Css 递增伪元素中以零开头的数字，后跟行

有可能在我所附的图片上创建类似的内容吗？ 我在h2标记上有：：before元素，但我不知道如何添加这些数字，它们也应该在每个部分递增：

代码（）

。第h2页{
位置：相对位置；
垫面：2rem；
}
.第h2页：：之前{
内容：''；
高度：0.4rem；
宽度：25%；
位置：绝对位置；
顶部：1rem；
左：0；
背景：ef4a24；
z指数：1；
}

介绍

不，只有在使用有序列表（

）的情况下，纯CSS才有可能实现这一点，这是不应该对标题执行的操作，即使这样，您也无法在数字之前获得零

因此，我不建议为此使用伪元素。这可以通过

和

显示：块更好地实现


.第h2页{
位置：相对位置；
垫面：2rem；
计数器增量：表头计数器；
}
.第h2页：：之前{
内容：计数器（表头计数器）”；
反增量：h2；
内容：计数器（表头计数器，十进制前导零）；
宽度：25%；
位置：绝对位置；
顶部：1rem；
左：0；
z指数：1；
字体大小：0.5em；
颜色：#ef4a24；
背景：线性渐变（向右，透明2em，currentColor 2em）；
背景
}

介绍
其他事情
其他事情
您可以使用a作为
：：before
元素的内容。您可以使用
线性渐变
创建直线，然后使用
背景大小
更改其高度，并将其垂直定位到中心：


正文{
计数器复位：表头计数器；
}
.第h2页{
位置：相对位置；
计数器增量：表头计数器；
}
.第h2页：：之前{
显示：块；
内容：计数器（表头计数器，十进制前导零）；
字号：0.6em；
颜色：#ef4a24；
背景：线性渐变（向右，透明2em，currentColor 2em）无重复；
背景尺寸：25%4px；
背景位置：左中；
边缘底部：2rem；
}

介绍
其他事情
您可以像这样使用CSS
计数器。只需将计数器设置到
字段items
div中，然后使用
：：before
伪元素将计数器添加到
h2
。在
伪元素之后添加一个
：：以添加行


正文{
字号：18pt；
字体系列：无衬线；
}
.外地项目{
计数器复位：部分；
}
.第h2页{
位置：相对位置；
垫面：1.8em；
}
.第h2页：：之前{
反增量：节；
内容：计数器（段，十进制前导零）；
字体大小：0.5em；
字体大小：粗体；
颜色：#ef4a24；
位置：绝对位置；
顶部：1.7em；
左：0；
}
.第h2页：：之后{
内容：''；
高度：10px；
宽度：25%；
位置：绝对位置；
顶部：1米；
左：1米；
背景：ef4a24；
z指数：1；
}

介绍
主要故事
后记
我更新了我的答案。。请再查一下。。也许你的问题解决了。