Are CSS Custom Properties not available to pseudo elements?

At the head of my page, I have a bunch of CSS Custom Properties that work in all of my stylesheets, however, when I try to access them via ::before/::after pseudo-elements, Chrome states that the variable is not defined.

As an example:

<head>
  ...
  <style>
    :root {
      --my-variable: #ff0000;
    }
  </style>
</head>

And in my stylesheets:

.box {
  background-color: var(--my-variable); // Works fine
}

.box::after {
  background-color: var(--my-variable); // --my-variable is not defined
}

Just wondering if I've missed something?

I've also just noticed it works fine with Firefox, so perhaps it's a bug?

Update: So it seems CSS Properties aren't inherited in pseudo-elements so it needs to be set directly as per this answer

Working Example:

:root, *::before, *::after {
  --my-property: xyz;
}