I am currently developing a simple component that displays four steps, indicating the current step and allowing users to navigate through them. I want to create a design where these numbers are enclosed within circles that are evenly distributed in a line from start to finish. Below is the HTML code I have used:
<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>
Here is my corresponding CSS styling:
.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 acknowledge that there might be more efficient ways to achieve this design, and I am uncertain why applying the z-index property to the line does not yield the desired outcome. When testing the code on CodePen, everything seemed to work perfectly fine without any issues.
If anyone can identify where I may have gone wrong, I would greatly appreciate your insights.
Thank you for your assistance and time.