Vue.js v-bind:style Pseudo element :: after content icon
Let's say you have a parent component:
<div id="parent"> <ChildComponent id="child"> // Possibly from another library?</div>// renders -><div id="parent"> <div id="child"> <div id="child-component-item"> ::after </div> </div></div>The challenge is creating a binding for the #child-component-item:after selector.
We can use css vars to solve this problem, by "reaching into" the child component with some CSS. Note that you may have to use ::v-deep if your style is scoped.
parent-component.js
<div id="parent-component" :style="{'--bgColor': bgColor}"> <ChildComponent></div><script> export default { data() { return { bgColor: 'red' } } }</script><style> #child-component-item:after { background-color: var(--bgColor) }</style>
It seems you'd like to add one icon following the progress bar.
If so, check below demo, it uses one span simulate the icon, then bind left to move the icon.
Vue.config.productionTip = falseapp = new Vue({ el: "#app", data: { counter: 0, max: 100, intervalID: null }, methods: { runTask: function () { clearInterval(this.intervalID) this.counter = 0 this.intervalID = setInterval(() => { this.counter = (this.counter+7)%this.max }, 1000) } }}).badge { background-color:green; border: 1px solid black; padding: 2px; transition: 1s;}<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/><script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script><script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script><div id="app"> <button @click="runTask()">Run</button> <b-progress class="mt-1" :max="max" show-value> <b-progress-bar :value="counter" variant="success"> <span class="badge" style="position:absolute;" :style="{'left':counter*100/max + '%'}" v-show="counter > 0">x</span> </b-progress-bar> </b-progress></div>