css - 如何在 CSS 中创建进度步骤

Question

我有一个元素列表，我想将其转换为 CSS 中的进度步骤。

ol {
  width: 800px;
}
li {
  display: inline-block;
  color: transparent;
  height: 25px;
  width: 25px;
  background-color: #abc;
  border-radius: 50%;
  border: 2px solid #08f;
  margin-right: 150px;
}

li:last-child {
  margin-right: 0;
}

li:not(:last-child)::before {
  content: "";
  border: 2px solid #08f;
  margin-left:25px;
  width: 153px;
  display: inline-block;
}

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
  <li>Step 4</li>
</ol>

理想情况下我想做的是:

• 阻止第 4 步从底部消失
• 使用 <li> 的内容作为圆圈上方的标签
• 使总宽度等于视口(viewport)宽度的 80%

我只是想自学一些更高级的 CSS，并且我已经在其他地方看到过这种模式 - 但我已经尝试了一个小时左右，但没有任何乐趣。

这对我来说是一个学习练习，所以如果您有时间，我希望得到一些解释和答案。

谢谢，

Answer 1

body {
    display:     grid;
    place-items: center;
    margin:      0;
    padding:     36px;
}

ol {
    display: flex;
    width:   80%;
    padding: 12px 0;
}

li {
    position:    relative;
    padding:     0;
    flex-grow:   1;
    height:      2px;
    background:  #08f;
    display:     flex;
    align-items: center;
}

li:last-child {
    margin-right: 0;
    flex-grow:    0;
}

li::after {
    content:       "";
    position:      absolute;
    left:          0;
    display:       inline-block;
    color:         transparent;
    height:        24px;
    width:         24px;
    background:    #abc;
    border-radius: 50%;
    border:        2px solid #08f;
}

span {
    position:  absolute;
    top:       -36px;
    left:      12px;
    width:     max-content;
    transform: translateX(-50%);
    z-index:   1;
}

<ol>
  <li><span>Step 1</span></li>
  <li><span>Step 2</span></li>
  <li><span>Step 3</span></li>
  <li><span>Step 4</span></li>
</ol>

在我的代码中，节点是伪元素，我使用 flex-grow 属性以便规则(即 li 标记)正确分布。 font-size: 0 隐藏文本并将其从元素的内容大小中移除。

---- 编辑:

我删除了 font-size: 0 并为标签和 css 添加了 span 标签来定位它。