在 mat-expansion-panel-header 上设置 ::before 元素的样式？

Question

在这个演示中我正在尝试像这样设置

mat-expansion-panel-header

的

::before

伪元素的样式（样式规则添加到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;
}

因此，如果上述规则生效，演示中的

mat-expansion-panel-header

项目将只是黑色。

但是该规则并未生效，当我查看开发人员工具时，我没有看到

::before

元素。

关于如何解决这个问题有什么想法吗？

Answer 1

我认为 scss 语法允许您将

::before

伪元素放入

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;
  }
}