CSS Pseudo-elements z-index inside bootstrap modal

Question

I'm trying to have a status indicator inside my bootstrap modal (Bootstrap v3) and I have a problem with z-index. My css is:

.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>

so I was expecting something like: but instead I got something like: Seeing that the bootstrap modal has a default z-index of 1050, I believe that's the problem. But, I've tried to put the :after element on z-index 1051 and the :before element on 1052 so the :before element is on top of :after element with no success. What happened was I got this: So, what can I do so I have the desired status indicator inside a bootstrap modal?

Example: http://jsfiddle.net/vgm3kby2/5/

Answer 1

Add position: relative; to your .progressbar li:before

.progressbar li:before {
        content: counter(step);
        counter-increment: step; 
        position: relative;
        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;  
        z-index: 1052;
    }

    .progressbar li:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 14px;
        top: 13px;
        left: -50%;
        z-index: 1051;
        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;
    }

Working example here: https://jsbin.com/yufufepepu/edit?html,css,output