.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  line-height : 30px;
  border: 1px solid #ddd;
  border-radius: 100%;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  background-color: #fff;
}
.progressbar li:after {
  content: "";
  position: absolute;
  width: 86%;
  height: 1px;
  background-color: #ddd;
  top: 15px;
  left: -44%;
  z-index : 0;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active {
  color: green;
}
.progressbar li.active:before {
  border-color: green;
} 
.progressbar li.active + li:after {
  background-color: green;
} 
.progressbar li {
  list-style: none;
  display: inline-block;
  width: 24.33%;
  position: relative;
  text-align: center;
  cursor: pointer;
}