EN VI

Javascript - Styling the ::before element on a mat-expansion-panel-header?

How to Javascript - Styling the ::before element on a mat-expansion-panel-header?

In this demo I'm trying to style the mat-expansion-panel-header's ::before pseudo element like this (Style rules added to styles.scss):

mat-expansion-panel-header {
  position: relative;
}

mat-expansion-panel-header::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 1000;
  background-color: black;
}

So if the above rule would take effect the mat-expansion-panel-header items in the demo would just be black.

However the rule does not take effect and when I look in the developer tools I don't see the ::before element.

Any ideas on how to fix this?

This is the HTML just for reference:

<mat-accordion>
<!-- #docregion basic-panel -->
<!-- #docregion hide-toggle -->
  <mat-expansion-panel hideToggle>
<!-- #enddocregion hide-toggle -->
    <mat-expansion-panel-header>
      <mat-panel-title>
        This is the expansion title
      </mat-panel-title>
      <mat-panel-description>
        This is a summary of the content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>
<!-- #enddocregion basic-panel -->
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

Solution:

I think scss syntax allows you to put the ::before pseudo element inside mat-expansion-panel-header

mat-expansion-panel-header {
  position: relative;
  ::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 1000;
    background-color: black;
  }
}

Is this how it's supposed to look?