html - 如何在图标之间创建垂直线(带有示例图像)

Question

在尝试了很多东西并搜索了网络之后，我仍然无法找到如何在图标之间创建一条类似的垂直线，如图像左侧所示。有人关于如何实现这一目标的想法？任何帮助将不胜感激!!

Answer 1

您可以像 sanjeev 所说的那样使用 before 伪代码，下面是它是如何完成的。运行代码段时查看完整页面。不确定错误代码是什么意思。

.timeline {
  position: relative;
  margin: 10px 0;
  padding: 0;
  list-style: none;
  counter-reset: section;
}
.timeline:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fdb839;
  left: 32px;
  margin: 0;
  border-radius: 2px;
}
.timeline > li {
  position: relative;
  margin-right: 10px;
  margin-bottom: 50px;
  padding-top: 18px;
  box-sizing: border-box;
  padding-left: 90px;
}
.timeline > li:before,
.timeline > li:after {
  display: block;
}

.timeline > li:before {
  counter-increment: section;
  content: counter(section);
  background: #fdb839;
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  border-radius: 50%;
  left: -1px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #Fff;
  font-size: 22px;
  font-weight: bold;
  border: 15px solid #fff;
  box-sizing: border-box;
}
.timeline > li:after {
  clear: both;
}

<ul class="timeline">
  <li>
    asdfasdf
  </li>
  <li>
    asdfsdf
  </li>
</ul>