: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 devtools parent css

chrome devtools :before css - all styles excluding the background-color are applied to the :before element as excepted

user_561959 · Answer

This answer to a similar question might help https://stackoverflow.com/a/63322762/561959

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*/
}

user_9876084 · Answer

They are accessible, but in order to see them on your pseudo-element, you have to apply them on it.

See on the documentation how to use :root variables: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Here is how to use pseudo-elements: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

You can try something like this on your code:

a::before {
   content: "";
   width: 50px;
   height: 50px;
   display: block;
   background-color: var(--site-primary-color);
}

:root variables not available on :before element

2 Answers