Html CSS-背景色溢出问题

需要删除与进度圈重叠的线。尝试放置“溢出：隐藏”，但不起作用

我知道这是一些简单的CSS技巧，但无法解决它

这是代码

#msform{
文本对齐：居中；
位置：相对位置；
利润上限：30像素
}
#进度条{
边缘底部：30px；
溢出：隐藏；
计数器重置：步骤
}
#李国宝{
列表样式类型：无；
文本转换：大写；
字体大小：9px；
宽度：33.33%；
浮动：左；
位置：相对位置；
字母间距：1px
}
#李：以前{
内容：计数器（步骤）；
反增量：步进；
宽度：24px；
高度：24px；
线高：26px；
显示：块；
字体大小：12px；
颜色：#333；
背景：灰色；
边界半径：25px；
保证金：0自动10px自动
}
#李：之后呢{
内容：''；
宽度：100%；
高度：2倍；
背景：7d6b6b；
位置：绝对位置；
左-50%；
顶部：9px
}
#李：第一个孩子：之后{
内容：无
}
#progressbar li.主动：之前，
#progressbar li.活动：之后{
背景：#ee0979；
颜色：白色
}

步骤1
步骤2
步骤3

将z-index添加到

#progressbar li:before

#progressbar li:before {
   z-index: 5;
   position: relative;
}

CSS属性设置定位元素及其子体或flex项的z顺序。z指数较大的重叠元素覆盖了z指数较小的元素

#msform{text align:center；position:relative；margin top:30px}#progressbar{margin bottom:30px；溢出：hidden；计数器重置：step}#progressbar li{列表样式类型：none；文本转换：大写；字体大小：9px；宽度：33.33%；float:left；位置：relative；字母间距：1px}#progressbar li:在{内容：计数器（step）之前；计数器增量：步长；宽度：24px；高度：24px；行高：26px；显示：块；字体大小：12px；颜色：#333；背景：灰色；边框半径：25px；边距：0自动10px自动；z索引：5；
位置：相对；}进度条li:在{content:''之后；宽度：100%；高度：2px；背景：7d6b6b；位置：绝对；左侧：-50%；顶部：9px}进度条li:第一个子项：在{content:none}进度条li之后。活动：在}之前，进度条li之前。活动：在{background:#ee0979；颜色：白色}

步骤1
步骤2
步骤3

这不是溢出问题，而是堆叠顺序问题。 您只需将

z-index

添加到

li:before

中，即可将其置于堆栈的最高位：

#progressbar li:before {
    position: relative; /* add this */
    z-index: 1;  /* add this */
    content: counter(step);
    counter-increment: step;
    width: 24px;
    height: 24px;
    line-height: 26px;
    display: block;
    font-size: 12px;
    color: #333;
    background: grey;
    border-radius: 25px;
    margin: 0 auto 10px auto;
}