: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

Please provide a runnable minimal reproducible example that demonstrates the issue, from what I can see in your code, it seems fine. — Vitor Martins, May 07 '21 at 14:59

score 11 · Answer 1 · answered May 18 '22 at 18:18

11

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

answered May 18 '22 at 18:18

Jason Freitas

1,587
10
18

4

THIS ANSWER IS **WRONG** : https://jsfiddle.net/dfmq63g8/ – Temani Afif Dec 01 '22 at 08:39
1

That sort of works but if you look at your fiddle in devtools it says "--c is not defined" even though it has an effect. Maybe its a bug in chrome? – Jason Freitas Dec 14 '22 at 02:31

Christopher S. · Answer 2 · 2023-02-26T19:36:31.417

Define them twice

For now and as far as I can tell you have to define them twice unfortunately. There could absolutely be a best practice however I couldn't find one so this set up works for me.

I add my css vars/ custom properties to specific selectors so they can be modified further per element selector as well as it being slightly easier to inspect each element and have your css vars/ custom properties show with your selector.

Using a preprocessor like sass/scss helps a lot. My usage of this technique is far too lengthy to show all of it, but this is the way.

Example Method 1


// Make a mixin so its easy to repeat
// css vars/ custom properties
@mixin css-vars($var){
   --var-bg: #{$var};
}

// Defined before using @include
$var: #fff;

.example {

  &,// available to .example
  &::before,
  &::after {
    @include css-vars($var);
    background: var(--var-bg);
  }
}

Which would output:

.example, .example::before, .example::after {
  --var-bg: #fff;
  background: var(--var-bg);
}

Example Method 2

Another method would be with nesting mixin includes that contain the css vars.

@mixin css-vars-generator(
  $example-color
) {
    // Some cool things could happen here,
    // @each loops, color adjustment functions, etc...
 --example-color: #{$example-color};
}

@mixin css-vars(
  $example-color
) {

  // CSS Variables / Custom Properties not inherited or available on psuedo elements from parent elements or :root
  // Must include in them in any pseudo you want to use them
  &,
  & *:before,
  & *:after,
  & *:hover,
  & *:active,
  & *:focus {
    @include css-vars-generator(
      $example-color
    );
  }
  // 
}
$example-color:#fff;
.example-parent{
    @include css-vars($example-color);
}

Which would ouput:

.example-parent, .example-parent *:before, .example-parent *:after, .example-parent *:hover, .example-parent *:active, .example-parent *:focus {
  --example-color: #fff;
}

:root variables not available on :before element

2 Answers2

Define them twice

Example Method 1

Example Method 2

Linked