:root variables not available on :before element

Question

I got a lot of CSS variables assigned to :root but these are not accessible inside my :before element. I'm not able to find anything on this online.

When inspecting the parent of the :before element, I see all my :root variables in the bottom of the styles panel in google dev tools. See screenshots below.

My CSS

    &__meta {
    padding: 10px 0;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    color: var(--text-color);

    &-author {
        margin-right: 15px;
    }
    &-primary-cat:before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 5px;
        background-color: var(--text-color);
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 5px;
    }
}

Chrome dev tools parent CSS

Chrome dev tools :before CSS - all styles excluding the background-color are applied to the :before element as expected

Answer 1

The answer to a similar question might help: CSS variables not working in dialog::backdrop

The pseudo-elements don't inherit the variables from :root. It sounds like you need to need to add them to the list where you define them, e.g.

:root,
::after,
::before {
    /* Your variables*/
}