子div内Font Awesome图标如何置于父div的brightness滤镜上层

CSS规范中，给父元素设置filter属性会创建独立的层叠上下文，所有子元素的渲染都会被纳入该滤镜的计算范围，无论子元素z-index设置多高，都无法避开父元素的滤镜效果，这是当前代码出现问题的核心原因。

不需要修改原有HTML结构，把父元素的滤镜变暗效果改为用伪元素实现即可，伪元素层级介于父元素原有内容和图标之间，既可以实现背景变暗的效果，也不会影响上层的Font Awesome图标。

修改后的CSS代码 #

/* 给父元素添加相对定位，作为内部绝对定位元素的参照 */
.collapsible-header {
  position: relative;
  overflow: hidden;
}

/* 移除原父元素hover状态的filter属性 */
.collapsible-header:hover {
  /* 删除原有 filter:brightness(50%); 规则 */
}

/* 新增伪元素实现变暗效果 */
.collapsible-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* 等效于brightness(50%)的视觉效果，可调整透明度改变暗程度 */
  opacity: 0;
  z-index: 1;
  pointer-events: none; /* 避免遮挡父元素原有点击交互 */
  transition: opacity 0.2s ease; /* 可选，添加过渡动画更顺滑 */
}

.collapsible-header:hover::before {
  opacity: 1;
}

/* 调整cover层的层级，确保高于变暗伪元素 */
.collapsible-header .cover {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2; /* 仅需比伪元素的z-index高即可 */
}

.collapsible-header:hover > div {
  display: block;
}

hover时伪元素显示，覆盖在父元素原有内容上实现变暗效果，图标所在的.cover层层级更高，不会被伪元素覆盖，因此图标亮度不会被影响，完全符合需求。

内容的提问来源于stack exchange，提问作者Klaess Turbolent