如何在图标之间创建垂直线（带示例图像）

Question

在尝试了大量的事情并搜索网络后，我仍然无法找到如何在图标左侧所示的图标之间创建类似的垂直线。有人想知道如何实现这个目标吗？任何帮助将不胜感激!!

Answer 1

您可以使用CSS创建它：在选择器之前

Answer 2

你可以在伪代码之前使用sanjeev说的，以及它是如何完成的。运行代码段时在整页中查看。不确定错误代码是什么。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;