How To Create A Vertical Line Between Icons (with Example Image)

After trying numerous things and searching the web I still can't find out how to create a similar vertical line between the icons as shown in the left ofthe image. Someone an idea

Solution 1:

You can use before pseudo code as sanjeev said and Here's how it is done. View in full page when you run the snippet. not sure what's the error code is for.

.timeline {
  position: relative;
  margin: 10px0;
  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;
}

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

Solution 2:

You can create it using CSS :before Selector