Select Pseudo-element (such ::before and ::after ) of element in DOM

Question

Here is my code:

HTML:

<div class="class"></div>

CSS:

.class:before {
   content: "text";
   color: red;
}

I need to change the red colour to green in DOM (no jQuery)

Hello :) May I ask you if there is a reason for you to use pseudo elements (`::before`)? You could simply stile your text the normal way I believe. — Phy, Mar 24 '20 at 00:12
from the duplicate: https://stackoverflow.com/a/49618941/8620333 — Temani Afif, Mar 24 '20 at 09:13

score 0 · Answer 1 · answered Mar 24 '20 at 00:22

0

yes, with css variables

const Root = document.documentElement;

Root.style.setProperty('--mycolor', 'green');

:root {
  --mycolor : red;
}
.class:before {
  content: "text";
  color: var(--mycolor);
}

<div class="class"></div>

answered Mar 24 '20 at 00:22

Mister Jojo

1 Answers1