使用锚标签制作按钮时，如何将伪元素置于背景与主内容之间？

我来帮你搞定这个伪元素层级的问题！你遇到的核心问题是伪元素默认会渲染在元素内容的上层，所以不仅盖住了按钮的背景区域，连文字也被挡住了。要把伪元素放到按钮和页面背景之间，只需要调整元素的定位和层级关系就行，具体步骤如下：

关键思路 #

• 给按钮元素设置position: relative：这不仅能让伪元素的定位相对于按钮本身，还能让按钮成为一个「层级上下文」，这样伪元素的z-index才会相对于按钮生效。
• 给伪元素设置position: absolute + z-index: -1：把伪元素从正常文档流中脱离，同时让它的层级低于按钮本身（按钮默认层级是0，-1就会跑到按钮下面）。
• 让伪元素铺满整个按钮：用top: 0; left: 0; width: 100%; height: 100%;确保伪元素和按钮尺寸完全一致。

完整代码示例 #

section { padding: 80px 0; }
section.one { background: #76B39D; }
.button { 
  color: white; 
  margin: 10px; 
  font-size: 17px; 
  font-weight: 700; 
  letter-spacing: 1px; 
  text-transform: capitalize;
  /* 给按钮设置基础定位，构建层级上下文 */
  position: relative;
  /* 增加内边距让按钮更美观 */
  padding: 12px 24px;
  /* 去掉锚标签默认下划线 */
  text-decoration: none;
  /* 显式设置文字层级，确保不会被伪元素遮挡 */
  z-index: 1;
}
.button-type-1 { 
  border: 2px solid white;
}

/* 伪元素样式：放在按钮与背景之间 */
.button-type-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 示例背景色，可根据需求修改 */
  background-color: rgba(255,255,255,0.2);
  /* 关键：将伪元素层级设为低于按钮 */
  z-index: -1;
  /* 可选：添加过渡效果提升交互体验 */
  transition: all 0.3s ease;
}

/* 可选：hover时伪元素的变化效果 */
.button-type-1:hover::before {
  background-color: rgba(255,255,255,0.4);
}

为什么这样有效？ #

• position: relative给按钮创建了局部层级上下文，伪元素的z-index只会在这个上下文内生效，不会干扰其他元素。
• z-index: -1让伪元素的层级低于按钮本身，所以按钮的文字（默认层级为0）会正常显示在伪元素之上，而伪元素又会浮在页面背景（section的背景）上方，完美实现你想要的视觉层级。

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