0

Sound simple enough.

I Just want to set some --progress variable on DOM element and read it through some attribute on that element:before.

Setting CSS-variable on the element is just element.style.setProperty('--progress',value). But it turns out that the value is not inherited to pseudo-element. even if declared with :

@property --progress{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

so how can I do that without declare CSS class for each percent like :

element.p-1:before{
 --progress:1%;
}

element.p-2:before{
 --progress:2%;
}

....
pery mimon
  • 7,713
  • 6
  • 52
  • 57
  • 1
    *it turns out that the value is not inherited to pseudo-element* --> they are inherited. The issue must somewhere else – Temani Afif Jul 27 '22 at 15:35
  • 2
    related: https://stackoverflow.com/a/49618941/8620333 I am setting CSS variable on pseudo element without any problem – Temani Afif Jul 27 '22 at 15:36
  • rigth , I do a test with diffrent variable and it work, now I wonder what happen. I think maybe just from ":root" they not inherit. – pery mimon Jul 28 '22 at 08:10

0 Answers0