.progressbar{
counter-reset:step;
}

.progressbar li {

  list-style-type:none;
  float:left;
  width: 25%;
  text-align:center;
  position:relative;

}

.progressbar li:before{
  content: counter(step);
  counter-increment: step;
  width:30px;
  height:30px;
  line-height:30px;
  border:1px solid #ddd;
  display:block;
  text-align:center;
  margin : 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}

.progressbar li:after{
  content: counter(step);
  counter-increment: step;
  content:'';
  position:absolute;
  width:100%;
  height:1px;
  background-color: #ddd;
  top:15px;
  left:-58%;
  z-index: -1;
}

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