CSS步骤连接圆圈

Question

我正在尝试使用仅与CSS连接的某些步骤，到目前为止，我设法完成了这项工作：

但我需要删除红线所在的线路。

 <ul class="step">

    <li class="first">
        <span>1</span>
    </li>
    <li class="second">
        <span>2</span>
    </li>
    <li class="third">
        <span>3</span>
    </li>
    <li class="last">
       <span>4</span>
    </li>
</ul>

section.steps .steps-box .steps-container ul.step{
    margin: 0;
    list-style: none;
    border-top: 1px dotted #000;
}
section.steps .steps-box .steps-container ul.step > li{
    float: left;
    width: 25%;
    margin-top: -40px;
    padding: 0 10px;
}
section.steps .steps-box .steps-container ul.step li span{
    display: block;
    margin: 0 auto;
    height: 80px;
    width: 80px;
    line-height: 80px;
    border-radius: 80px;
    border: 1px solid;
    overflow: hidden;
    text-align: center
}

我需要的是一条仅从1到4的线，但我不知道如何在不使用图像的情况下做到这一点，有人可以帮忙吗？

提前谢谢！

Answer 1

尝试使用不同的方法实现此目的，并不总是列表是最佳布局。即：

<div class="connected-steps">
  <div class="step">1</div>
  <div class="connector"></div>
  <div class="step">2</div>
  <div class="connector"></div>
  <div class="step">3</div>
</div>

然后在容器上使用display:flex，让.connector增长以填充.step之间的空格。

.connected-steps {
  display: flex;
  width: 100%;
  align-items: center;
}

.step {
  color: white;
  background-color: red;
  display: block;
  border-radius: 10px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}

.connector {
  flex-grow: 1; //fill the space
  width: 10px;
  content: "";
  display: block;
  height: 1px;
  background-color: red;
}

以下是工作示例：https://codepen.io/bondartrq/pen/QOKxGR

这是完全响应的，您可以使用容器的flex属性来反转顺序和方向......

祝你好运!!