I have a demo where I am attempting to customize the appearance of the mat-expansion-panel-header's ::before pseudo element with the following CSS 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;
}
If these style rules were successful, all mat-expansion-panel-header items in the demo would be displayed in black.
However, it seems that the rule is not taking effect as expected. When inspecting the developer tools, I can't see the ::before element being applied.
Do you have any suggestions on how to resolve this issue?
Here's the HTML code 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>