CSS伪元素z-index内部引导模式

我试图在我的引导模式(bootstrapv3)中有一个状态指示器,但是我的z索引有问题。我的css是:

.progressbar {
  counter-reset: step;
  font-size: 16px;
  color: #a697a8;
}

.progressbar li {
  list-style-type: none;
  float: left;
  width: 20%;
  position: relative;
  text-align: center;
  font-weight: bold;
}

.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 40px;
  height: 40px;
  border: 1px solid #ffffff;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 40px;
  background-color: #a697a8;
  color: #ffffff;
}

.progressbar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 14px;
  top: 13px;
  left: -50%;
  z-index: -1;
  background-size: 35px 35px;
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
  background-color: #a697a8;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: #6d9b31;
}

.progressbar li.active:before {
  background-color: #6d9b31;
}

.progressbar li.active+li:after {
  background-color: #6d9b31;
}

<button type="button" id="btn" data-toggle="modal" data-target="#myModal">Show modal</button>

<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg" style="width: 90%">
        <div class="modal-content">
            <div class="modal-body">
                <div>
                    <div>
                        <ul class="progressbar">
                            <li >
                                First status
                            </li>
                            <li >
                                Second status
                            </li>
                            <li >
                                Third status
                            </li>
                            <li >
                                Fourth status
                            </li>
                            <li >
                                Fifth status
                            </li>
                        </ul>
                    </div>
                </div>
                <br /><br /><br />
                <hr />
                <div>
                    <label>Some label</label><br /><br />
                </div>
            </div>
        </div>
    </div>
</div>

所以我期待的是: 看到引导模式的默认z索引是1050,我相信这就是问题所在。但是,我尝试将:after元素放在z索引1051上,将:before元素放在1052上,因此:before元素放在:after元素之上,但没有成功。我得到的是:

例子: http://jsfiddle.net/vgm3kby2/5/