Html 以李为中心：：在满足于李之前

我正在尝试实现一个面包屑导航栏，如下图所示（取自Name便宜的结账页面）。为了简单起见，假设购物车图标是一个蓝色圆圈

通过检查站点的代码，我了解到他们使用了

：：before

选择器来放置水平线和圆形槽口以及标签。我可以把线固定好，但不能把圆圈固定好

以下是我目前掌握的情况：

正文{
填充：1rem；
颜色：#6d6e70；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：粗体；
}
分步导航集装箱{
位置：相对位置；
}
单步导航{
显示：内联块；
宽度：100%；
保证金：2.5雷姆0；
填充：0；
列表样式：无；
}
ol.步骤导航：：之前{
内容：''；
边框顶部：3px实心#6d6e70；
页边顶部：-1px；
位置：绝对位置；
顶部：1rem；
右：0；
左：0；
z指数：-1；
}
ol.步骤导航。步骤导航4：：之前{
利润率：0.12.5%；
}
ol.步骤导航。步骤导航-5：：之前{
利润率：0.10%；
}
ol.step-nav li{
文本对齐：居中；
显示：相对；
浮动：左；
}
ol.step-nav li：：之前{
内容：''；
宽度：0.625rem；
高度：0.625雷姆；
边框：3px实心#6d6e70；
边界半径：100%；
位置：绝对位置；
顶部：0.625雷姆；
左：50%；
背景色：白色；
}
ol.step-nav li.active{
颜色：#8dc2c2；
}
ol.step-nav li.active:：之前{
边框：3px实心#8dc2c2；
}
ol.step-nav.step-nav-4里{
宽度：25%；
}
ol.step-nav.step-nav-5里{
宽度：20%；
}

推车
复习
计费
下单
完成
推车
计费
下单
完成

以下是基于您的代码和注释的工作代码段

正文{
填充：1rem；
颜色：#6d6e70；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：粗体；
}
分步导航集装箱{
位置：相对位置；
}
单步导航{
显示：内联块；
宽度：100%；
保证金：2.5雷姆0；
填充：0；
列表样式：无；
}
ol.步骤导航：：之前{
内容：''；
边框顶部：3px实心#6d6e70；
页边顶部：-1px；
位置：绝对位置；
顶部：1rem；
右：0；
左：0；
z指数：-1；
}
ol.步骤导航。步骤导航4：：之前{
利润率：0.12.5%；
}
ol.步骤导航。步骤导航-5：：之前{
利润率：0.10%；
}
ol.step-nav li{
文本对齐：居中；
浮动：左；
位置：相对位置；
}
ol.step-nav li：：之前{
内容：''；
宽度：0.625rem；
高度：0.625雷姆；
边框：3px实心#6d6e70；
边界半径：100%；
位置：绝对位置；
顶部：-1.875雷姆；
左：50%；
背景色：白色；
}
ol.step-nav li.active{
颜色：#8dc2c2；
}
ol.step-nav li.active:：之前{
边框：3px实心#8dc2c2；
}
ol.step-nav.step-nav-4里{
宽度：25%；
}
ol.step-nav.step-nav-5里{
宽度：20%；
}

推车
复习
计费
下单
完成
推车
计费
下单
完成

首先，将

位置设置为
ol.step-nav.step-nav-4 li
选择器
相对
。然后，将
ol.step-nav li:：before
选择器的
top
更改为about
-2rem
。如果可以的话，试试这个。谢谢，
ol.step-nav li{position:relative；}
和
ol.step-nav li:：before{top:-1.875rem；}
成功了。