Progress bar CSS and HTML only

Question

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 1

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.