How change content value of pseudo :before element by Javascript

Question

I have the grap constructured by CSS, which is dynamically changes by JS. I show graph max value by pseudo element as:

.graph:before {
    content:\"\"; //va         


        

Answer 1

People who are still looking some solution of same problem, it is doable as follows using jQuery:

Change

This example illustrate that on clicking button: changeBefore , the value for .graph:before will change as per new dynamic coming value for it.

For more description about changing of :before or :after element style or getting its content:

Lets suppose your HTML is like this:

Test

And then you are setting its :before in CSS and designing it like:

#something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

Please notice I also set content attribute in element itself so that you can take it out easily later. Now there is a button clicking on which, you want to change the color of :before to green and its font-size to 30px. You can achieve that as follows:

Define a css with your required style on some class .activeS :

.activeS:before{
   color:green !important;
   font-size:30px !important;
 }

Now you can change :before style by adding the class to your :before element as follows:

Change

If you just want to get content of :before, it can be done as:

Get Content

I hope it helps