如何实现带圆形节点与连接线的步骤面包屑导航

你可以通过新增CSS样式的方式实现需求，不需要修改原有HTML结构，直接在现有CSS代码末尾添加以下代码即可：

/* 替换circle文本为圆形节点 */
.steps-progress-bar li p:first-of-type {
    /* 隐藏原有circle文本 */
    font-size: 0;
    /* 定义圆形尺寸 */
    width: 16px;
    height: 16px;
    /* 圆角设置为50%实现圆形 */
    border-radius: 50%;
    /* 未激活状态下的圆形背景色，和连接线默认色统一 */
    background-color: #eeeeee;
    /* 调整位置和连接线对齐，同时上下留出合适间距 */
    margin: 12px auto 8px;
    padding: 0;
}

/* 激活状态下的圆形样式，和主题色统一 */
.steps-progress-bar li.active p:first-of-type {
    background-color: #0072DC;
}

添加完成后即可实现对应效果：未激活的步骤节点为灰色圆形，已激活的步骤节点为蓝色圆形，和原有进度条连接线位置自动对齐，不需要调整其他原有代码。如果后续需要调整圆形的大小，直接修改上述代码里的width和height值即可，两个值保持相等就能维持圆形效果。

内容的提问来源于stack exchange，提问作者user15895653