如何解决CSS中标记高亮效果与渐变文字效果的背景冲突问题

冲突的核心逻辑是：

• 渐变文字效果依赖父元素h1的background配合background-clip: text实现，此时父元素的背景会被裁剪为文字形状填充，同时文字本身被设为透明
• 嵌套在h1内的em是子元素，自身的background渲染层级高于父元素背景，会直接覆盖父级裁剪后透出的渐变效果，加上em默认继承了父级的-webkit-text-fill-color: transparent，最终就只会显示灰色背景，看不到渐变文字

把马克笔高亮效果移到em的伪元素上实现，不占用em本身的背景属性，同时把伪元素层级放到文字下方，就不会挡住渐变效果，原有h1的渐变代码完全不需要修改。
修改后的CSS代码如下：

/* 原有渐变文字代码保持不变 */
h1 {
  background: -webkit-linear-gradient(#229, #aaf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 修改后的马克笔高亮样式 */
em {
  position: relative;
  font-style: normal; /* 如果不需要默认斜体可以保留这行，不需要就删掉 */
}
em::before {
  content: "";
  position: absolute;
  /* 调整上下左右的数值可以控制高亮区域的padding范围 */
  left: -2px;
  right: -2px;
  top: 15%;
  bottom: 15%;
  background: gray;
  z-index: -1; /* 核心：把高亮背景放到文字层下方 */
}

对应的HTML结构示例：

<h1>普通渐变文字 <em>带马克笔高亮的渐变文字</em> 剩余渐变文字</h1>

如果不想使用伪元素，也可以用box-shadow模拟高亮背景，不需要修改原有结构：

em {
  /* 给em单独设置和h1一致的渐变文字 */
  background: -webkit-linear-gradient(#229, #aaf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 用内阴影模拟背景高亮，不会覆盖文字 */
  box-shadow: inset 0 0 0 100vw gray;
  padding: 0 2px;
}

内容的提问来源于stack exchange，提问作者Valentino Badalucco