如何在带有::before伪元素的容器内使用::after伪元素实现按钮样式

安全阿岳

2026-10-14

问题原因

这是CSS层叠上下文规则导致的层级遮挡问题：

按钮::after伪元素设置了z-index: -1，默认会处于当前所属层叠上下文的最底层
你没有给button元素显式指定z-index，按钮自身未形成独立层叠上下文，导致::after向上查找父级层叠上下文，最终层级低于.zimmer-cover-dark::before蒙层，被完全遮挡无法显示。

解决方案

只需要给button元素新增一个z-index: 0的属性，让按钮创建独立的层叠上下文即可，此时::after的负z-index仅相对于按钮自身的层级，会正常显示在按钮下方，不会被外部蒙层遮挡：

button {
  font-weight: 400;
  border: solid 2px #585858;
  outline: 0;
  padding: 1rem 4rem;
  font-size: 1.25rem;
  letter-spacing: 0.00rem;
  background-color: white;
  border-radius: 0.35rem;
  position: relative;
  cursor: pointer;
  z-index: 0; /* 新增此行 */
}