为什么我的HTML-CSS进度条会失去颜色？

我有一个进度条代码，描述了支持票可能经历的生命周期：

.container{
宽度：700px；
保证金：100像素自动；
}
.progressbar{
计数器复位：步骤；
}
.progressbar li{/*未完成任务的名称*/
列表样式类型：无；
宽度：20%；
浮动：左；
字体大小：12px；
字体系列：无衬线；
位置：相对位置；
文本对齐：居中；
颜色：#7d7d7d；
}
.progressbar li:在{/*未完成任务循环之前*/
宽度：20px；
高度：20px；
内容：“；
反增量：步进；
线高：20px；
边框：2px实心#7d7d；
显示：块；
文本对齐：居中；
保证金：0自动5px自动；
边界半径：50%；
背景色：白色；
}
.progressbar li:在{/*行之前的未完成任务之后*/
宽度：100%；
高度：2倍；
内容：''；
位置：绝对位置；
背景色：#7d7d7d；
顶部：12px；
左-50%；
z指数：-1；
}
李：第一个孩子：之后{
内容：无；
}
.progressbar li.done{/*已完成任务的复选标记和名称*/
颜色：#55b776；
}
.progressbar li.done:在完成任务的{/*圈之前*/
边框颜色：#55b776；
内容：“\2713”；
}
.progressbar li.done+li:在完成任务后的{/*行之后*/
背景色：#55b776；
}

打开
正在进行中
工程学
提供的决议
封闭的

z-index:-1

正在将

：after

伪元素推到文档中其他元素的后面

相反，从

:after

中删除

z-index

，并在

:before

中添加一个带正值的

z-index

.container{
宽度：700px；
保证金：100像素自动；
}
.progressbar{
计数器复位：步骤；
}
李先生{
/*未完成任务的名称*/
列表样式类型：无；
宽度：20%；
浮动：左；
字体大小：12px；
字体系列：无衬线；
位置：相对位置；
文本对齐：居中；
颜色：#7d7d7d；
}
李：以前{
/*未完成任务的循环*/
宽度：20px；
高度：20px；
内容：“；
反增量：步进；
线高：20px；
边框：2px实心#7d7d；
显示：块；
文本对齐：居中；
保证金：0自动5px自动；
边界半径：50%；
背景色：白色；
位置：相对；/*------------已添加*/
z索引：1；/*---------------------------已添加*/
}
李：之后呢{
/*未完成任务前的行*/
宽度：100%；
高度：2倍；
内容：''；
位置：绝对位置；
背景色：#7d7d7d；
顶部：12px；
左-50%；
}
李：第一个孩子：之后{
内容：无；
}
李先生，完毕{
/*已完成任务的复选标记和名称*/
颜色：#55b776；
}
完成：之前{
/*已完成任务的循环*/
边框颜色：#55b776；
内容：“\2713”；
}
.progressbar li.done+li:之后{
/*跟踪已完成任务的行*/
背景色：#55b776；
}

公司
案件编号：0000000
开放日期：2017年10月31日下午2:13
您收到此电子邮件是因为您的案例已更新。您的案例详细信息和任何更新都可以在此消息下方找到。

如果您希望对案例发表评论，您只需回复此电子邮件，您的案例就会得到更新。如果您想包含屏幕截图或相关日志文件，您可以在回复中包含它们。

打开
正在进行中
工程学
提供的决议
封闭的

为了继续处理您的案件，我们需要有关报告问题的更多信息或澄清。请在未来4天内提供所需信息。如果在此期间未收到任何响应，我们将临时归档您的
案例一旦您准备好继续，只需回复一封案例电子邮件即可。
主题
这里的票名
描述
这里是车票说明

增加了

z-index:3；位置：相对位置

到before元素和

z-index:0到后面的元素


.container{
宽度：700px；
保证金：100像素自动；
}
.progressbar{
计数器复位：步骤；
}
李先生{
/*未完成任务的名称*/
列表样式类型：无；
宽度：20%；
浮动：左；
字体大小：12px；
字体系列：无衬线；
位置：相对位置；
文本对齐：居中；
颜色：#7d7d7d；
}
李：以前{
/*未完成任务的循环*/
宽度：20px；
高度：20px；
内容：“；
反增量：步进；
线高：20px；
边框：2px实心#7d7d；
显示：块；
文本对齐：居中；
保证金：0自动5px自动；
边界半径：50%；
背景色：白色；
z指数：3；
位置：相对位置；
}
李：之后呢{
/*未完成任务前的行*/
宽度：100%；
高度：2倍；
内容：''；
位置：绝对位置；
背景色：#7d7d7d；
顶部：12px；
左-50%；
z指数：0；
}
李：第一个孩子：之后{
内容：无；
}
李先生，完毕{
/*已完成任务的复选标记和名称*/
颜色：#55b776；
}
完成：之前{
/*已完成任务的循环*/
边框颜色：#55b776；
内容：“\2713”；
}
李先生，完毕+