CODEWITHSUNDEEP
javascriptcssfrontendpseudo-elementcss-variables
AdjunctProfessorFalcon
AdjunctProfessorFalcon

Reputation: 1840

CSS pseudo class disappears after variable value update via JS

I would like to be able to update a CSS variable via JS, but when I make the variable update the CSS pseudo element get's destroyed (i.e. just disappears).

Here's the SCSS code: 

:root {
  --test-thing: "";
}

.folder-1-open span::after {
    width: 90%;
    height: 85%;
    bottom: 0;
    left: 5%;
    background-color: #fff;
    z-index: 3;
    content: var(--test-thing);
}

I'm trying to manipulate the variable thusly: 

const root = document.documentElement
root.style.setProperty('--test-thing', "Hello World")

The CSS above works perfectly fine on the element (a label) that it's applied to, basically just a white square, but as soon as I try and update the CSS variable --test-thing to add a string via the content prop, the whole thing just disappears.

Is it not possible to do this with a pseudo element or class?

From researching related posts on SO, my understanding was that this was possible using CSS variables.

For context, I’m working off this example of a pure CSS interactive folder (when it’s open is when I’d like to update content proper dynamically).

Upvotes: 2

Views: 988

Answers (2)

Fernando Mellone
Fernando Mellone

Reputation: 350

You can add a "style" element and put your styles as "textContent".

const styleElement = document.createElement('style')

styleElement = `
.<your_classname> {
   margin: 10px;
}

.<your_classname>::before {
   border: 10px;
}
`;

document.head.appendChild(styleElement)

Upvotes: 0

yaakov
yaakov

Reputation: 4665

Ok, I figured out why this is happening, sort of. Still not 100% sure why, but it has something to do with the fact that the new value isn't in quotes. Just put the value in quotes and it works fine.

const root = document.documentElement
root.style.setProperty('--test', "'Hello World'") // <-- this needs to be in quotes
:root {
  --test: "";
}

#test {
  height: 100px;
  width: 100px;
  background: #ccc;
}
#test:after {
  content: var(--test);
  min-width: 100px;
  background: #000;
  min-height: 30px;
  color: #fff;
}
<div id="test">

</div>

Upvotes: 8

Related Questions