Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
20 replies
Santiago García

Setting text of pseudo element from JavaScript

I'm trying to set the text of a pseudo element (::before or ::after) through JavaScript.

h1 {
  --text: "Hello World!";
  --color: black;
}

h1::before {
  content: var(--text);
  color: var(--color);
}


Setting the color works as expected:

document.querySelector('h1').style.setProperty('--color', 'hotpink')


While trying to set the text makes the pseudo element disappear

document.querySelector('h1').style.setProperty('--text', 'Hello World from JS'))
js

I know there are other ways I can solve this, but I'd like to understand why this does not work.

Here is a codesanbox that reproduces the issue: https://codesandbox.io/s/clever-wind-q4r2vh
CodeSandbox
clever-wind-q4r2vh - CodeSandbox
clever-wind-q4r2vh
clever-wind-q4r2vh - CodeSandbox
Was this page helpful?