I'm currently tackling a multi-step progress bar implementation. My challenge right now is figuring out how to position the circle markers representing each step on top of the connecting lines. I've tried using the :after pseudo-element to add the line to each circle, and I even utilized z-index to ensure that the circles always appear on top, but unfortunately, it didn't produce the desired result. Any suggestions or alternative approaches?
For reference, here's the link to the jsfiddle: http://jsfiddle.net/gaqz77qf/1/
.visuallyhidden {
display: none;
}
.wizard-progress {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
margin-top: 20px;
float: left;
white-space: nowrap;
}
.wizard-progress li {
float: left;
text-align: center;
position: relative;
}
.wizard-progress .step-name {
display: table-cell;
height: 32px;
vertical-align: bottom;
text-align: center;
width: 100px;
z-index: 100;
}
.wizard-progress .step-name-wrapper {
display: table-cell;
height: 100%;
vertical-align: bottom;
}
.wizard-progress .step-num {
border: 2px solid #ddd;
border-radius: 50%;
width: 24px;
height: 24px;
display: inline-block;
margin-top: 10px;
z-index: 100;
}
.wizard-progress .step-num:after {
content: "";
display: block;
background: #CCC;
height: 15px;
width: 85px;
position: absolute;
bottom: 5px;
left: 58px;
z-index: 0;
}
.wizard-progress li:last-of-type .step-num:after {
display: none;
}
.wizard-progress .active-step .step-num {
background-color: #ff0500;
}<ol class="wizard-progress clearfix">
<li class="active-step">
<span class="step-name">
Foo
</span>
<span class="visuallyhidden">Step </span>
<span class="step-num">1</span>
</li>
<li>
<span class="step-name">Bar</span>
<span class="visuallyhidden">Step </span>
<span class="step-num">♥</span>
</li>
<li>
<span class="step-name">Baz</span>
<span class="visuallyhidden">Step </span>
<span class="step-num">3</span>
</li>
<li>
<span class="step-name">Quux</span>
<span class="visuallyhidden">Step </span>
<span class="step-num">4</span>
</li>
</ol>