Javascript 具有特定宽度的水平向导导航

我有一个水平向导导航，它工作得很好，但是对于我未能实现的样式有一些要求

我的代码：

.WizardNavigation{
宽度：100%；
显示器：flex；
}
.WizardNavigation.WizardNavigation\u项目{
列表样式类型：无；
位置：相对位置；
文本对齐：居中；
flex：自动；
}
.WizardNavigation.WizardNavigation\u项目.WizardNavigation\u点{
显示：块；
宽度：12px；
高度：12px；
文本对齐：居中；
边界半径：50%；
背景：白色；
边框：1px纯蓝色；
z指数：1；
保证金：0自动；
位置：相对位置；
大纲：无；
光标：指针；
}
.WizardNavigation.WizardNavigation\uuuu项~.WizardNavigation\uuu项.WizardNavigation\uuu行{
内容：''；
位置：绝对位置；
宽度：100%；
高度：2倍；
右：50%；
背景颜色：蓝色；
顶部：5px；
z指数：0；
}
.WizardNavigation.WizardNavigation\uuuU项.WizardNavigation\uU项--active.WizardNavigation\uU点{
背景：蓝色；
颜色：1px纯蓝色；
}
.WizardNavigation.WizardNavigation\uuuU项--活动~.WizardNavigation\uU项.WizardNavigation\uU点{
背景：白色；
边框：1px纯色灰色；
}
.WizardNavigation.WizardNavigation\uuuU项--活动~.WizardNavigation\uU项.WizardNavigation\uU行{
背景颜色：灰色；
}
.导航范围{
显示：无；
}

---

好吧，如果我理解的话，问题是这个东西没有父对象那么宽。这里有一个解决方案

步骤1：摆脱内联宽度样式

步骤2：摆脱

s

步骤3：将以下内容添加到

.WizardNavigation

  justify-content: space-between;
  position: relative;
  overflow: hidden;

步骤4：从

.WizardNavigation.WizardNavigation\uu项目中删除此项

text-align: center;
flex: auto;

步骤5：添加一些内容以替换

元素。我们将在

.WizardNavigation\uu项--active

元素上使用伪元素

.WizardNavigation__Item--active:before {
    content: '';
    position: absolute;

    background-color: blue;
    top: 6px;
    z-index: 0;  
    width: 100vw;
    right: 0;
    border-bottom: 2px solid blue;
}
.WizardNavigation__Item--active:after {
    content: '';
    position: absolute;

    background-color: blue;
    top: 6px;
    z-index: 0;  
    width: 100vw;
    left: 5px;
    border-bottom: 2px solid gray;
}

---

我想就是这样。。。请看这里：

您能重新表述一下您想要实现的目标吗？我很难理解这一点。我很确定只要css样式就可以实现。我更新了我的问题，你能再检查一下吗？不幸的是，这对我不起作用。如果你看我的例子，你可以看到活动步骤后的线是灰色的，而不是蓝色的。这条线在当前步骤之前是蓝色的，而灰色的后挡板工作得非常好。非常感谢。