CSS Custom properties nesting

index.html

<div class="box">
  Hi! I'm box
  <div class="box__child">Hi! I'm box child</div>
</div>

style.css

.box {
  --padding: 20px;

  padding: var(--padding);
  background-color: aliceblue;
  border: 1px solid;
}

.box__child {
  padding: var(--padding);
  background-color: pink;
}

.box__child::after {
  --size: calc(100% - var(--padding));
  --padding-box: calc(var(--padding) / 2);
 
  content: "Hi! I'm box child after content";
  display: block;
  padding: var(--padding-box);
  width: var(--size);
  background-color: tan;
}