vuejs - v-bind in pseudo css element

Asked

Viewed 438 times

0

I need to change the color of a pseudo element, according to some conditions. To simplify, I did first without any condition, just want to change the color through the v-bind

I have a pseudo CSS element:

.status span:before {
    content: '';
    width: 25px;
    height: 25px;
    border-radius: 25px;
    border: 4px solid #3e70ff;
    position: absolute;
    top: -15px;
    background-color: #c1c1c1;
    left: 42%;
    transition: all 200ms ease-in;
}

In HTML I’m doing like this:

div v-bind:class="'span:before'" v-bind:style="{ color: 'red' }"></div>

However, I could not change the color of the pseudo element. How can I do?

html css vue.js
  • 1

    I don’t understand Vue, but I assume that pseudo-elements are only changeable in the CSS itself. That’s because they don’t exist in the DOM, so they are pseudo-elements.

1 answer

2

It makes no sense that you want to modify CSS with Vue.

It makes more sense to get your CSS ready for the change and make Vue change the "state" of its component.

Example:

Let’s say you want the span:before has the red font when a button is clicked.

You should create a CSS with the default value of span:before and other with widget status changes. See an example:

new Vue({
    el: "#app",
    data: () => ({
        ativo: false
    })
})
span:before {
    content: "[before] ";
}

span.ativo:before {
    color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <span :class="{ativo}">Meu span</span>
  <br>
  <button @click="ativo = !ativo">Botão</button>
</div>

Browser other questions tagged html css vue.js

You are not signed in. Login or sign up in order to post.