javascript - 使用 CSS 跳过步进器连接线

Question

我有一个用 React 构建的步进器组件。该组件接受一系列步骤，并接受一系列禁用步骤的索引以跳过它们。我想使用 CSS 以如下所示的方式跳过虚线。

我构建的步进器:

预期使用 CSS:

代码在Stackblitz中

请导航至 Step.jsx 以获取样式。

请指教。

Answer 1

尝试为特定的 li 元素添加 .skip 类并在 css 下方添加

CSS

.skip:before{
    content: "";
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: -10px;
    border: 1px dashed;
    border-top: 0;
    border-radius: 0 0 100% 100%;
}

输出