Creating CSS circle steps connected with lines from top to the bottom - html

Question

I already figure out to do the circle steps horizontally. But to do like the picture below is quite stressful. Can you figure out how to do this?
Here is code
.container-progress {
margin: 100px auto;
font-size: 24px;
font-weight: bold;
font-family: Verdana;
color: white;
margin-top: 50px;
padding: 0;
}
.progressbar {
margin: 0;
padding: 0;
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 16%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.progressbar li:before {
width: 5em;
height: 5em;
content: counter(step);
counter-increment: step;
line-height: 90px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
padding: 0;
border-radius: 50%;
background-color: black;
font-size: 18px;
font-weight: bold;
}
.progressbar li:after {
margin-top: 30px;
width: 100%;
height: .5em;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: white;
}
.progressbar li.active:before {
border-color: dodgerblue;
background: dodgerblue;
}
.progressbar li.active+li:after {
/*background-color: dodgerblue;*/
}
.progressbar label {
color: black;
}
<div class="container-progress">
<ul class="progressbar">
<li class="active active-step">
<label>step 1</label>
</li>
<li>
<label>step 2</label>
</li>
<li>
<label>step 3</label>
</li>
<li>
<label>step 4</label>
</li>
<li>
<label>step 5</label>
</li>
<li>
<label>step 6</label>
</li>
</ul>
</div>
Fiddle link

Answer 1

This uses a border on the ul to create your connecting lines and uses position:absolute to position the individual steps. You will probably need to tweak it a bit more but it could get you moving in the right direction.
Edit
To get the first three label to appear above ther cirlces, swap :before with :after. I've updated my code to reflect this.
.container-progress {
margin: 100px auto;
font-size: 24px;
font-weight: bold;
font-family: Verdana;
color: white;
margin-top: 50px;
padding: 0;
}
.progressbar {
margin: 0 50px;
padding: 0;
counter-reset: step;
position:relative;
border: 2px solid #7d7d7d;
border-left:none;
min-height:200px;
}
.progressbar li {
list-style-type: none;
width: 16%;
/*float: left;*/
font-size: 12px;
position: absolute;
text-align: center;
text-transform: uppercase;
}
/*First Three*/
.progressbar li:nth-child(-n+3)
{
top:-45px
}
/*Last Three*/
.progressbar li:nth-last-child(-n+3)
{
bottom:-75px
}
/*Left*/
.progressbar li:nth-child(1), .progressbar li:nth-child(6)
{
left:-45px
}
/*Middle*/
.progressbar li:nth-child(2), .progressbar li:nth-child(5)
{
left:calc(50% - 45px);
}
/*Right*/
.progressbar li:nth-child(3), .progressbar li:nth-child(4)
{
left:calc(100% - 45px);
}
.progressbar li:nth-last-child(-n+3):before, .progressbar li:nth-child(-n+3):after {
width: 5em;
height: 5em;
content: counter(step);
counter-increment: step;
line-height: 90px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
padding: 0;
border-radius: 50%;
background-color: black;
font-size: 18px;
font-weight: bold;
}
/*.progressbar li:after {
margin-top: 30px;
width: 100%;
height: .5em;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}*/
/*.progressbar li:first-child:after {
content: none;
}*/
.progressbar li.active {
color: white;
}
.progressbar li.active:before, .progressbar li.active:after {
border-color: dodgerblue;
background: dodgerblue;
}
.progressbar li.active+li:after {
/*background-color: dodgerblue;*/
}
.progressbar label {
color: black;
}
<div class="container-progress">
<ul class="progressbar">
<li class="active active-step">
<label>step 1</label>
</li>
<li>
<label>step 2</label>
</li>
<li>
<label>step 3</label>
</li>
<li>
<label>step 4</label>
</li>
<li>
<label>step 5</label>
</li>
<li>
<label>step 6</label>
</li>
</ul>
</div>