Css 如何画水平线？

嗨，这是我想做的

图像后面的水平线？有8个圆，我希望它们用一条线连接起来

我在bootstrap中创建了它，因此这些行被分成两列6，每个列中有3列3

 .stepnumber {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: #f9b315;
  vertical-align: middle;
  color: #fff;
  padding-top: 2px;
  padding-right: 10px;
  font-size: 18px;
  font-weight: bold;
  margin-top: 150px;
  left: -10px;

}

.step {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: #fff;
  margin-top: 80px;
  margin-right:-60px;
  position: absolute;

}





<div class="container">
          <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">
                      <div class="lineline"><div class=stepnumber>1</div></div>
                    </div>
                    <div class="col-md-3">
                     <div class="step">
                        <div class="workstitle">
                          BOOK
                        </div>

                </div>           
                    </div>
                    <div class="col-md-3">
                      <div class=stepnumber>2</div>
                    </div>
                    <div class="col-md-3">
                      <div class="step">
                        <div class="workstitle">
                          WAIT
                        </div>

                      </div>          
                    </div>
                 </div>
              </div> 

    <div class="col-md-6">
            <div class="row">
                <div class="col-md-3">
                  <div class=stepnumber>3 </div> 
                </div>
                <div class="col-md-3">
                  <div class="step">
                   <div class="workstitle">
                     FOUND
                   </div> 

            </div>          
                </div>
                <div class="col-md-3">
                  <div class=stepnumber>4</div>
                </div>
                <div class="col-md-3">
                  <div class="step">
                   <div class="workstitle">
                     FLY!
                   </div> 

            </div>          
                </div>
          </div>
    </div>
</div>

.stepnumber{
高度：30px；
宽度：30px；
边界半径：50%；
背景色：#f9b315；
垂直对齐：中间对齐；
颜色：#fff；
垫顶：2件；
右边填充：10px；
字号：18px；
字体大小：粗体；
边缘顶部：150px；
左：-10px；
}
.步骤{
高度：150像素；
宽度：150px；
边界半径：50%；
背景色：#fff；
边缘顶部：80px；
右边距：-60px；
位置：绝对位置；
}
1.
书
2.
等待
3.
建立
4.
飞！

通过在包装元素上使用

:after

（或

:before

）伪类，您可以获得想要的外观。您可以在

：after

元素上创建边框，并使用z-index将其放置在圆的后面

下面是一个如何构建它的示例

。时间线{
高度：150像素；
线高：150px；
显示：表格；
位置：相对位置；
}
.时间表：之后{
位置：绝对位置；
左：0.5em；
右：0.5em；
最高：50%；
内容：“；
边框顶部：3px实心#F9B315；
z指数：900；
}
-项目{
显示：表格单元格；
垂直对齐：中间对齐；
z指数：1000；
位置：相对位置；
}
-项目>部门{
左边距：0.5em；
右边距：0.5em；
宽度：150px；
高度：150像素；
边界半径：50%；
文本对齐：居中；
线高：150px；
字体大小：粗体；
字号：18px；
背景色：#f9b315；
颜色：#FFF；
}
.-item:type>div{margin left:0；}
.-item:type>div{margin right:0；}
-项目编号>部门{
宽度：30px；
高度：30px；
线高：2；
}

1.
书
2.
等待
3.
建立
4.
飞！

这需要您做一些工作，但这里有一种方法可以在div后面放置一条水平线

这条线的诀窍是做一个只有1px高的div。你需要考虑一下：

.line{
  height: 1px;
  width: 100px;
  background-color: black;
  z-index: 1;
  position: absolute;
  top: 25px;
}

---

请提供CSS。如果我知道我在看什么，我可以把它修好。我讨厌痛苦，但是看看我为你做的这把小提琴，按照它应该看起来的样子去拿。我只看到一个圆圈。我能为你做点什么吗？我真的不知道为什么只有一个圆圈你有几个答案可供选择。祝你好运海恩斯的答案看起来也不错——只是一个警告，当这些在手机上因为引导崩溃时，你将失去时间线。