title: Dynamic styling for pseudo element's content in Vue2.x
body: <p>I have a component that is basically an Icon and a tooltip; it shows the tooltip( whose text comes from the parent component as a prop) on mouse hover. I implemented the tooltip with the help of pseudo-elements so I need to update the pseudo element's content with the prop's value. I am also aware of the fact that Pseudo element rules of CSS aren’t part of the DOM, and therefore they can’t be altered using JavaScript methods, but I found a bunch of workarounds that basically work for any CSS property but not <code>content</code>(I can see they work (e.g. for width property of tooltip or its color ) but strangely not for the <code>content</code> property), here is what I have done so far, any help would be appreciated:</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;!-- &lt;style&gt;
              :root {
              --info-msg: {{tooltipContent}};
              }
          &lt;/style&gt; --&gt;
          &lt;div class=&quot;infoBar&quot;&gt;
              &lt;svg-icon
                  fill=&quot;#d5d5dc&quot;
                  :width=&quot;16&quot;
                  :height=&quot;16&quot;
                  name=&quot;common/c-info&quot;
                  class=&quot;infoBar__icon&quot;
              /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'ContentInfo',
    props: {
      tooltipContent: {
        type: String,
        default: 'hint text goes here'
      }
    },
    mounted () {
      console.log(this.tooltipContent)
      this.applyCSS()
    },
  
    beforeUpdate () {
      this.applyCSS()
    },
    methods: {
      applyCSS () {
        const cssRule = `
        .infoBar:after{
          content: ${this.tooltipContent};
        }`
        const style = document.createElement('style')
        style.type = 'text/css'
        this.$el.appendChild(style)
        style.innerHTML = cssRule
      }
    }
  
  }
  &lt;/script&gt;
  
  &lt;style lang=&quot;postcss&quot; &gt;
  
    .infoBar{
      position: relative;
      margin-left: 24px;
      &amp;::after {
        background-color: #000;
        font-size: 12px;
        color: #fff;
        border-radius: 2px;
        width: 198px;
        height: 40px;
       /*content: var(--info-msg)*/
        display: none;
        padding: 11px 26px 10px 27px;
        position: absolute;
        top: 0;
        left: 80%;
        transform: translate(-50%, calc(-100% - 10px));
        z-index: 999;
      }
      &amp;::before {
        background-color: #000;
        content: '';
        display: none;
        position: absolute;
        width: 10px;
        height: 6px;
        z-index: 999;
        top: 0;
        left: 80%;
        transform: translate(-50%, calc(-100% - 10px)) rotate(45deg);
      }
      &amp;:hover::after {
        display: block;
      }
      &amp;:hover::before {
        display: block;
      }
      &amp;__icon:hover{
          fill: #e4002b;
        }
    }
  
    &lt;/style&gt;
  </code></pre>