z-index 不能与伪元素一起正常工作

Question

我试图在 anchor/button 周围制作边框，但不知何故 z-index 在以下代码中不起作用，即使我为它们中的任何一个分配了位置。它在一定程度上与负 z-index 一起工作（但其他伪类如 :hover 等将不起作用 --> 请参阅我的最后一个问题），但有人可以解释为什么 ::在伪元素一直显示在按钮上方而不是下方之前？

这是我的代码：

.start-coding {
  display: block;
  font-size: 1.3rem;
  color: white;
  background-color: black;
  padding: 0.4rem 1.8rem;
  position: relative;
  z-index: 5;
  border-radius: 5px;
  width: 100%;
}

.start-coding::before {
  content: '';
  background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
  border-radius: 5px;
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  z-index: 1;
}

<a href="#" class="start-coding">Start Coding</a>

Answer 1

这是因为您已将伪元素绝对定位在 <a> 元素中，这导致它堆叠在具有静态定位的文本节点之上。

要解决此问题，只需将内部文本用 <span> 包裹起来，然后添加此规则：

.start-coding > span {
  position: relative;
  z-index: 2;
}

更好：您甚至不需要向 ::before 和嵌套的 <span> 添加 z 索引，因为它们的顺序确保当它们被放置在堆栈上下文，<span> 将始终位于顶部（因为它位于 DOM 树中的 ::before 元素之后）。参见示例：

.start-coding {
  display: block;
  font-size: 1.3rem;
  color: white;
  background-color: black;
  padding: 0.4rem 1.8rem;
  position: relative;
  z-index: 5;
  border-radius: 5px;
  width: 100%;
}

.start-coding::before {
  content: '';
  background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
  border-radius: 5px;
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
}

.start-coding>span {
  position: relative;
}

<a href="#" class="start-coding"><span>Start Coding</span></a>

z-index 不能与伪元素一起正常工作

z-index not working properly with pseudo-element

html

css

z-index

pseudo-element