Kiwimoisi Kiwimoisi - 3 months ago 19
CSS Question

Progress bar CSS and HTML only

I have been trying to build a progress bar only made out of HTML and CSS, although having some difficulties getting the "connected dots" style.

Because it's based on the :After elements how can I have them behind the circles , sort of z-indexed ?

Ideally the dot 1 should connect 2 , 2 connect 3, and 3 connect 4.

https://jsfiddle.net/bzjs1h9r/1/

<section class="steps">
<ul class="checkout">
<li class="current">
<div class="index">...</div>
<div class="caption">Email</div>
</li>
<li class="inactive">
<div class="index">2</div>
<div class="caption">Your Info</div>
</li>
<li class="inactive">
<div class="index">3</div>
<div class="caption">Delivery</div>
</li>
<li class="inactive">
<div class="index">4</div>
<div class="caption">Review</div>
</li>
</ul>




.steps {
.checkout {
display: table;
table-layout: fixed;
width: 100%;
li {
display: table-cell;
padding-left: 0;
text-align: center;

&:before {
margin: 0 auto;
display: block;
width: 30px;
height: 30px;
content: "";
text-align: center;
float: none;
position: relative;
top: 30px;
border-radius: 100%;
border: 2px solid #79b93e;
}

&:after {
content: "";
border: 1px solid rgba(135, 135, 135, 0.2);
width: 100%;
webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(180deg);
display: block;
position: absolute;
top: 60px;
right: -53px;
}


&:last-child {
&:after {
display: none;
}
}

.caption {
text-transform: uppercase;
margin-top: 5px;
font-weight: 900;
}
}
}
.container-fluid {
max-width: 550px;
overflow:hidden;
}


}

Answer

Your problem here is you miss to set position:relative to li. The connect line of li:after is absolute to first not position:inherit ancestor, body if none, in your version the line should be absolute to the li element.

https://jsfiddle.net/bzjs1h9r/2/

my fixes:

li {
  position:relative;
  &.index: {
    position:relative;
    z-index: 3;
  }
  &:before {
    z-index: 2;
    background: #fff;
  }
  &:after {
    z-index: 1;  
  }
}

and also some position adjustments.

ps: the rotate of li:after seems meaningless here.