CSS

Question

我尝试学习如何在 CSS 中使用伪元素，但我遇到了问题。我尝试创建一个包含一些文本和一个伪元素的容器。

但我不希望伪元素位于元素文本之后但位于背景色之前。我不知道如何实现这一目标。我希望伪元素成为背景色的一部分并位于背景色之前。但要落后于容器的实际内容。

这是我面临的确切问题的一小段：

.container {
  height: 10rem;
  background-color: blue;
  color: white;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  background-color: red;
}

<div class="container">
  <h1>This is a title</h1>
</div>

Answer 1

只需将 z-index 设置为容器的子项。

.container {
  height: 10rem;
  background-color: blue;
  color: white;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  background-color: red;
}

.container>* {
  position: relative;
  z-index: 2;
}

<div class="container">
  <h1>This is a title</h1>
</div>

CSS - 在元素文本后面的伪元素之前

CSS - before pseudo element behind element text

positioning

pseudo-element