如何避免text-shadow覆盖text-decoration文本装饰效果？

要让text-decoration（文本装饰）显示在text-shadow（文本阴影）之上，可以通过以下两种实用方法实现：

方法1：嵌套元素分层控制 #

通过嵌套元素分别承担文本阴影和文本装饰的职责，利用CSS层级关系让装饰线处于上层。

修改后的HTML：

<a href="" id="link"><span>here</span></a>

对应的CSS：

#link {
  color: white;
  text-decoration: underline;
  position: relative;
  z-index: 1; /* 确保链接的装饰线在阴影之上 */
}

#link span {
  text-shadow: black 3px 3px;
  position: relative;
  z-index: 0; /* 让带阴影的文本处于下层 */
}

#link:hover {
  text-decoration: none;
}

main h1, h2, h3, h4, h5, h6 {
  text-shadow: black 3px 3px;
}

方法2：伪元素模拟文本装饰 #

无需修改HTML结构，用伪元素创建自定义下划线，手动设置其层级高于文本阴影。

修改后的CSS：

#link {
  color: white;
  text-decoration: none; /* 去掉原生装饰线 */
  position: relative;
  text-shadow: black 3px 3px;
}

/* 用伪元素模拟下划线 */
#link::after {
  content: '';
  position: absolute;
  bottom: -2px; /* 调整下划线与文本的距离 */
  left: 0;
  width: 100%;
  height: 1px; /* 下划线粗细 */
  background-color: white; /* 下划线颜色 */
  z-index: 1; /* 确保下划线在阴影之上 */
}

#link:hover::after {
  display: none; /*  hover时隐藏下划线 */
}

main h1, h2, h3, h4, h5, h6 {
  text-shadow: black 3px 3px;
}

原理说明 #

默认CSS渲染顺序中，text-shadow会绘制在text-decoration上方，导致装饰线被遮挡。通过分层（嵌套元素或伪元素）调整渲染层级，让文本装饰元素的z-index高于带阴影的文本元素，就能实现装饰线在阴影之上的效果。

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