How to do dynamic pseudo class width calculation inside methods? - vue.js

Question

I want to build a stepper component (trying to avoid using packages as less as possible). I have created it using plain HTML template and CSS and I want to size the ::before element according to the x number.
Something like this width: ${100% / 4}. I tried this method using methods and got a rendering error. Is it possible to do this? Or there is another way to achieve this?
Please have a look at my script:
<template>
<div class="c-stepper">
<div class="step-item" :style="drawLinePrecision(4)" v-for="item in 4" :key="item">
<div class="step-marker">
<i class="icon icon-duotones-check"></i>
</div>
<div class="step-info">
<p class="step-title">Step 1</p>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
drawLinePrecision(length) {
return `.step-item:not(:last-child)::before {
content: "";
height: 3px;
width: ${(100% / length)};
position: absolute;
top: 25%;
background-color: $primary;
}`
}
}
}
</script>
<style lang="scss" scoped>
#import "../../sass/variables";
.c-stepper {
display: flex;
justify-content: space-around;
align-items: center;
margin: 5rem 0rem;
position: relative;
.step-item {
&:not(:last-child)::before {
content: "";
height: 3px;
width: calc(100% / 4);
position: absolute;
top: 25%;
background-color: $primary;
}
.step-marker {
position: relative;
width: 50px;
height: 50px;
background-color: white;
border: 3px solid $primary;
border-radius: 50%;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
</style>

Answer 1

I just found a solution after some workaround. Instead of doing it like that, I had to make the width of the .step-item to be fixed by 100% except the last child and move the position: relative; from the parent down to the step-item itself.
Now, All I need is to set the padding from the parent component which display the c-stepper component.
Here is my script:
<template>
<div class="c-stepper">
<div class="step-item" v-for="item in 11" :key="item">
<div class="step-marker">
<i class="icon icon-duotones-check"></i>
</div>
<div class="step-info">
<p class="step-title">Step 1</p>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
#import "../../sass/variables";
.c-stepper {
display: flex;
justify-content: space-around;
align-items: center;
margin: 5rem 0rem;
.step-item {
margin: 0px auto;
position: relative; // step item must be relative
&:not(:last-child) {
width: 100%; // make it fixed
}
&:not(:last-child)::before {
content: "";
height: 3px;
width: 100%; // make it 100% width so that it won't let any gap to be rendered in the ui
position: absolute;
top: 25%;
background-color: $primary;
}
.step-marker {
position: relative;
width: 50px;
height: 50px;
background-color: white;
border: 3px solid $primary;
border-radius: 50%;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
</style>