Css 步进指示器

我正试图模仿这个步骤指示器，但我刚刚开始学习SASS，并不是一般的CSS专家

我正努力做到这一点：

但到目前为止：

代码笔： `

非常接近，但我意识到有一些问题我还不知道如何解决，并希望朝着正确的方向推进

我一直在挣扎的原著：

字体大小每一步增加1-2-3-4等

台阶之间的线条两端都有一个小的边距/空间

下面的字体不完美，也不正确居中

**我的文本是正确的，原文是错误的**

每个步骤都会添加一个类：

活动：带有蓝色圆圈和编号的电流为活动类别。 已完成：添加灰色复选框，我正在使用SVG。

---

非活动：带文本的普通白色背景。

以下是一些可能有帮助的更改，下面是更新的代码笔（在SCS中有其他注释）：

• 将SASS变量用于圆的大小和边界，以及直线和圆之间的间隙：

  $circleSize:50px；
  $CircleByOrderWidth:5px；
  $lineOffset:10px
  
  这使得计算线宽、位置和线宽变得更容易。例如：
  
  .progressbar li:之后{
  宽度：计算（100%-#{（$circleSize+$CircleOrderWidth*2+$lineOffset*2）}）；
  }
  

• 为非活动项添加白色边框，使其与

  活动项的大小相匹配-这样，线和圆之间的间隙可以均匀
  

---

编辑：更新代码笔以修复圆圈大小

以下是一些可能有帮助的更改，下面是更新的代码笔（在SCS中有其他注释）：

• 将SASS变量用于圆的大小和边界，以及直线和圆之间的间隙：

  $circleSize:50px；
  $CircleByOrderWidth:5px；
  $lineOffset:10px
  
  这使得计算线宽、位置和线宽变得更容易。例如：
  
  .progressbar li:之后{
  宽度：计算（100%-#{（$circleSize+$CircleOrderWidth*2+$lineOffset*2）}）；
  }
  

• 为非活动项添加白色边框，使其与

  活动项的大小相匹配-这样，线和圆之间的间隙可以均匀
  

---

编辑：更新代码笔以修复圆圈大小

请将相关代码位以a的形式添加到您的问题中-如果代码笔被删除，问题本身将变得不完整（且无用），因此无法回答。此外，我建议编辑你的标题，使其更能描述你的问题（现在是如此的通用，它可能意味着任何东西）-这使得未来用户更容易找到正确的问题/答案请以a的形式将相关的代码位添加到你的问题中-如果代码笔被删除，问题本身将变得不完整（而且毫无用处）因此无法回答。此外，我建议编辑你的标题，使其更能描述你的问题（现在是如此笼统，可能意味着任何事情）-这让未来的用户更容易找到正确的问题/答案非常感谢，伙计，以前从未尝试过calc，引导我走向正确的方向。非常感谢评论。非常感谢，伙计，以前从未尝试过calc，引导我走向正确的方向。也非常感谢评论。

.progressbar li.completed:before {
        content: '';
        background: url("/assets/icons/check.svg") 0 3px no-repeat;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #ebeae8;
    }`