Как сделать блок такого плана

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
}
li {
  list-style: none;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 10px;
  width: 25%;
  position: relative;
  color: lightgreen;
}
li.active {
  color: red;
}
li.active .img {
  background-color: red;
}
li .img {
  display: block;
  width: 50px;
  height: 50px;
  background-color: lightgreen;
  border-right: 15px solid white;
  border-left: 15px solid white;
}
li:before {
  content: '';
  font-size: 30px;
  font-weight: 700;
  top: 22px;
  left: -50%;
  right: 50%;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  border-bottom: 5px dotted lightgreen;
}
li.active:before {
  border-bottom: 5px dotted red;
}
li:first-child:before {
  border-bottom: none;
}

<ul class="wrapper">
  <li class="active">
    <span class="img"></span>
    <span class="title">Согласование проекта</span>
  </li>
  <li class="active">
    <span class="img"></span>
    <span class="title">Оплата и покупка</span>
  </li>
  <li>
    <span class="img"></span>
    <span class="title">Производство</span>
  </li>
  <li>
    <span class="img"></span>
    <span class="title">Оплата остатка и отгрузка</span>
  </li>
</ul>