Can anyone help me with adding a pseudo element ::after containing an icon (from FontAwesome) to my Bootstrap Vue ProgressBar? I want this icon to be dynamic and move along the progress bar line when I click. Here is my current implementation, where the ProgressBar value progresses from 0 to 100:
<b-progress v-bind:style="styleProgressBar" :value="counter" :max="max"></b-progress>
export default {
components:{
'navbar':navbar
},
name: "myPage",
data() {
return {
counter: 0,
max: 100,
step:1,
}
},
methods:{
prev() {
this.step--;
},
next() {
this.step++;
if (this.counter < 100) {
this.counter += 34;
}
}
}
}
I also came across this resource on styling in Vue.js: https://v2.vuejs.org/v2/guide/class-and-style.html
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}