Why CSS variables are not inherited in pseudo elements?

user_1240742 0
Viewed 1036

I have found something a bit strange, and could not find anything in the CSS custom properties spec about that. Here is a simple example: https://codepen.io/bakura10/pen/RwxNPxz

:root {
  --background: red;
}

.test {
  position: relative;
}

.test::before {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--background);
}
<div class="test">
  TEST
</div>

As you can see, despite the variable --background being defined at the root scope, it is simply not accessible from the before or after pseudo element.

Why is that so?

pseudo-element css
1 Answers

No it's working, you should give your :before position:absolute (it didn't have any width or height).

:root {
  --background: red;
}

.test {
  position: relative;
/*   background: var(--background); */
}

.test::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
/*   background-color: red; */
  background: var(--background);
}
<div class="test">
  TEST
</div>

user_174880150
Related