How to change :: after and :: before of an element with Javascript?

Question:

I need to change the content attribute of the after and before pseudo elements of the next HTML element without using libraries like jQuery . If I did something similar with CSS it would be something like this:

#text::before{background:red;display:block,content:"HolaMundo";}
#text::after{background:blue;color:red,font-size:100px;}

What would be the way to do it with Javascript?

var text = document.getElementById("text");
text...

Answer:

You can prepare :: after and :: before to load the content of an attribute by default.

In the example I have used the "title" attribute:

#text::after{
  content: attr(title);
}

And then update it with Javascript.

document.querySelector("#text").setAttribute("title" , "Nuevo texto")

The

document.querySelector("#text").title = "Nuevo texto";
Scroll to Top