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. =

https://stackoverflow.com/questions/38872290/how-to-get-pseudo-element — Daniel A. White, Aug 18 '18 at 18:18
https://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript/14106897 — Arup Rakshit, Aug 18 '18 at 18:19
Possible duplicate of [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) — Ezekiel, Aug 18 '18 at 19:52

score 3 · Answer 1 · answered Aug 18 '18 at 18:38

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.

How do I add :after in javascript

1 Answers1