title: Angular 2+ - how to pass variables to SASS :before / :after pseudo selectors
body: <p>In Angular 2+ I need to pass value stored in component variable to CSS top property used in one of :before styles. In this case I cannot use [ngStyle] directly because it doesn't allow to access CSS pseudo selectors. I've tried to use it to affect CSS variable like this:  </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="summaries-graph-box"&gt;
       &lt;div class="summaries-graph"&gt;
            &lt;div [ngStyle]="{'--odds-top-height': graphOddsTopHeight + 'px'}" 
                 class="summary-graph-column summary-plan summary-odds"&gt;
                    &lt;span class="summary-value"&gt;123&lt;/span&gt;
            &lt;/div&gt;                 
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>graphOddsTopHeight = 40;
  </code></pre>
  
  <p>and in CSS I'm using:</p>
  
  <pre><code> .summary-odds {
      --odds-top-height: 20px;
   }
  
    .summary-odds:before {
        min-height: 30px;
        top: var(--odds-top-height);
    }
  </code></pre>
  
  <p>The CSS variable is working however the value is still 20px (which is originally set within CSS) not 40px (provided from component variable).</p>
  
  <p>I've also tried to use attr like this:</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div [attr.odds-top-height]="graphOddsTopHeight + 'px'" 
        class="summary-graph-column summary-plan summary-odds"&gt;
            &lt;span class="summary-value"&gt;123&lt;/span&gt;
   &lt;/div&gt;                
  </code></pre>
  
  <p>and then in CSS:</p>
  
  <pre><code>summary-odds:before {
      top: attr(odds-top-height);
  }
  //or
  summary-odds:before {
      top: attr(data-odds-top-height);
  }
  </code></pre>
  
  <p>However in this case the browser simply ignores top property and crosses it out. </p>
  
  <p>Does anyone have an idea what is wrong with my code or what else I can do to pass variable from component to CSS :before pseudo selector?</p>