在一个旧项目中写一个步骤条功能，类似于antd。
其实我觉得步骤条最难处理的地方在于中间的横线，由于内容的长度不稳定性，所以要动态实现。

html

1679022955052.jpg

实现后的效果图

image.png

css

说一下重点吧
1，横线是用伪类after实现的，因为是展示在右侧，所以定位用的是left: 100%
2，li需要设置flex宽度flex:1（懂的应该知道是为了保持宽度一致）,li:last-child为了右对齐，要设置flex:none;横线和原型图标之间的距离，就靠li的paddingleft值 和 overflow-x:hidden来限制了，还有span的paddingright值
3，步骤条一般分为3个状态，已实现，当前，未实现；li默认的样式可以使用已实现的状态，当前的可以使用active等标记；未实现的可以使用波浪（~）选择器；
4，我发现antd步骤条横线的宽度可以理解为无限宽，然后后一个横线会覆盖上一个，直到最后一个，要使用透明色覆盖；

// 步骤条（使用less设置了一些变量，自行修改）
.steps {
    display: flex;
    .max-width(100%);
    padding: 0 15px;
    margin: 0 auto;
    overflow-x: hidden;
    li {
        flex: 1;
        position: relative;
        z-index: 1;
        overflow-x: hidden;
        label {
            display: inline-block;
            .border-style;
            border-color: @colorTheme;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            .border-radius(50%);
            color: @colorTheme;
            margin-right: 10px;
        }
        span {
            display: inline-block;
            font-size: @sizeSecondTitle;
            padding: 0 15px 0 0;
            line-height: 24px;
            position: relative;
            &::before {
                top: 13px;
                content: '';
                width: 9999px;
                height: 1px;
                position: absolute;
                left: 100%;
                background-color: @colorTheme;
            }
        }
        &.active {
            label {
                background-color: @colorTheme;
                color: #fff;
            }
            span {
                font-weight: bold;
                color: #000;
                &::before {
                    background-color: @fontColorDisable;
                }
            }
            ~ li {
                label {
                    border-color: @fontColorDisable;
                    color: @fontColorDisable;
                }
                span {
                    color: @fontColorDisable;
                    &::before {
                        background-color: @fontColorDisable;
                    }
                }
            }
        }
        + li {
            padding-left: 15px;
        }
        &:last-child {
            flex: none;
            span {
                padding-right: 0;
                &::before {
                    background-color: transparent !important;
                }
            }
        }
    }
}