html - 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)

标签： htmlcssdom

Answer 1

是的，使用 css 变量

const Root = document.documentElement;

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

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

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