How do I add :after in javascript

Question

html:

This is what I have

<div class="one"> Apple  </div>

I want to add the word "juice" using javascript .style. Is there a equivalent to :: after where I can set the content in javascript using .style.after = "juice"?

<div class="one"> Apple Juice </div>

js:

document.querySelector('.one').style.display ="inline";
document.querySelector('.one').style.marginLeft ="2px";
document.querySelector('.one').style. = 

Answer 1

I can think of a rather odd way of achieving what you want:

var style = document.createElement('style');
style.innerText = '.one::after { ... }';
document.body.appendChild(style)

So essentially just creating an entirely new <style></style> element and adding your pseudo selector styles there, and appending it to the body.