Modify element :before CSS rules programmatically in React

Question

I have an element whose :before style has to be modified based on calculations.

export class Content extends React.Component {
    render() {
           


        

Answer 1

You can iterate document.styleSheets, set .style of .cssRules where .selectorText matches pseudo selector

let sheets = document.styleSheets;
let selector = "div::before";
let replacementContent = '"after"';
for (let sheet of sheets) {
  for (let rule of sheet.cssRules) {
    if (rule.selectorText === selector) {
      rule.style["content"] = replacementContent;
    }
  }
}

div:before {
  content: "before";
  color: red;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 2px #000;
  background: green;
  width: 50px;
  height: 50px;
  display: block;
}

<div></div>