Why z-index in VUEJS style is not working?

Question

I'm creating a simple component that sets out four steps, indicating in which one you are and letting you move through them. I want to make the effect that these numbers are within a circle and that these circles are distributed from the beginning to the end of a line. For them I have made the following html

        <div class="counter">
          <div class="counter-line"></div>
          <router-link to="/init" v-bind:class="{'activeStep':(step >= 1)}">1</router-link>
          <router-link to="/init/service" v-bind:class="{'activeStep':(step >= 2)}">2</router-link>
          <router-link to="/init/resume" v-bind:class="{'activeStep':(step >= 3)}">3</router-link>
          <router-link to="/init/contact" v-bind:class="{'activeStep':(step >= 4)}">4</router-link>
        </div>

and here my css

  .counter {
    width: 100%;
    margin-top: -3%;
    text-align: center;
  }

  .counter a {
    margin: 45px;
    text-decoration: none;
    font-size: 40px;
    font-weight: bold;
    font-family: 'RalewayRegular';
    display: inline-block;
    border: 3px solid #D53865;
    background-color: #F8F2EF;
    border-radius: 50px;
    width: 80px;
    height: 80px;
    padding: 5px;
    box-sizing: border-box;
    color: #D53865;
    z-index: 2;
  }

  .counter a:hover,
  .counter a:active {
    background-color: #D53865;
    color: white;
  }

  .activeStep {
    background-color: #D53865;
    border: 1px solid white;
  }

  .counter-line {
    width: 470px;
    height: 3px;
    left: 35.5%;
    top: 47%;
    border-bottom: 3px solid #D53865;
    position: absolute;
    z-index: -1;
  }

I understand that the way to do it is probably not the right way, but I am in doubt as to why you do not apply the z-index to the line. When I tried to reproduce the error in the following codepen and in this link you will see that it does it correctly without problem.

here's my link

https://codepen.io/CharlieJS/pen/abNZWye

If anyone can make me see my mistake, I'd appreciate it,

Thank you in advance for your help and your time

Answer 1

add position: relative to .cta a

.cta a{
position: relative;
}