20 replies

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);
}

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

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

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

KP-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);
}

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

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

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

Setting text of pseudo element from JavaScript

Similar Threads

Setting text of pseudo element from JavaScript

Similar Threads

Similar Threads

Similar Threads