Assign a dynamic Vuejs value to css

Question

I have the following jsfiddle:

new Vue({
  el: '#cct',
  lang: {           
    myText: "my text is",
  }
});

.myCSS::after{
  content: {{lang.myText}}; //this does not output anything
}

I am trying to assign the Vuejs dynamic value to the CSS (content), please can anyone advise how I can achieve this?

Christian Carrillo · Accepted Answer · 2020-04-06 01:37:10Z

1

You can bind a css variable, to apply it as content of your pseudo class, as below:

new Vue({
  el: '#cct',
  data () {
    return {
      lang: "my text is"
    }
  }
})

.myCSS {
  margin: 1rem 0;
  border: 1px solid black;
}

.myCSS::after {
  content: var(--myText);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<div id="cct">
  <input v-model="lang">
  <div class="myCSS" :style="`--myText: '${lang}'`"></div>
</div>

answered Apr 6, 2020 at 1:37

Christian Carrillo

2,7612 gold badges11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Over a year ago

I think this is a great answer and it's exactly what the OP is after. It's clear they want to use CSS content. The only thing I'd add is perhaps using a fallback to attr() if IE11 support is required

Collectives™ on Stack Overflow

Assign a dynamic Vuejs value to css

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related