<ol class="steps">
  <li class="done">QC</li>
  <li class="done">Forward</li>
  <li class="done">ShortListed</li>
  <li class="doing">Interviews</li>
  <li class="todo">Offer</li>
  <li class="todo">Joined</li>
  <li class="todo">Probation</li>
  <li class="todo">Payment</li>
</ol>

ol {
	margin:0;
	padding:0;
	list-style:none;
}
.steps{
	width:100%;
	display:table;
	text-align:center;
	max-width:980px;
	margin:10px auto;
}
.steps li{
	display:table-cell;
	padding:10px 0 25px;
	position:relative;
	border-bottom:4px solid silver;
	font-weight:bold;
	width:1%;
}
.steps li:after{
	content:"\039f";
	position:absolute;
	bottom:-16px;
	left:0;
	right:0;
	margin:auto;
	width:26px;
	height:26px;
	line-height:26px;
	background:silver;
	color:#fff;
	border-radius:50%;
	z-index:2;
	font-size:1rem;
	text-align:center;
}
.steps li:first-child:before,
.steps li:last-child:before,
.steps li.doing:before{
	content:"";
	position:absolute;
	z-index:1;
	bottom:-4px;
	left:0;
	height:4px;
	background:#fff;
	width:50%;
}
.steps li:last-child:before{
	left:auto;
	right:0;
}
.steps li.doing:before{background:yellowGreen}
.steps li.done{border-color:yellowGreen}
.steps li.done:after,
.steps li.doing:after{
	content:"\2713";
	background:yellowGreen;
}
.steps li.doing:after{background:#000;}


@media screen and (max-width:640px){
	.steps,.steps li{display:block;width:auto;text-align:left}
	.steps{padding-left:25px}
	.steps li{padding:15px 15px 15px 25px;border:none;border-left:4px solid silver}
	.steps li:first-child:before,
	.steps li:last-child:before,
	.steps li.doing:before{
		top:0;
		bottom:50%;
		right:auto;
		height:auto;
		left:-4px;
		width:4px;
	}
	.steps li:last-child:before{
		top:50%;
		bottom:0;
	}
	.steps li:after{
		top:0;
		bottom:0;
		left:-16px;
		right:auto;
	}
}