CSS 伪元素“::Before”无效

Question

为什么我的伪元素 ::before 不起作用？我有一个嵌套在其中的元素，但它不起作用。我在 VSCode 上使用实时预览扩展，当我按“f12”时没有 ::before。

这是代码

HTML

<div class="image">
            <img
              src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZ3JhbW1lcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
              alt="Código de Programação"
            />
          </div>

和css

#home .image::before {
  content: 'asdasd';
  height: 100%;
  width: 100%;
  background: rgb(92, 226, 43);
  position: absolute;
  top: -16.8%;
  left: 16.7%;
  z-index: 1;
}

Answer 1

您的测试页中是否有 .image div 之外的元素？如果我这样做，我可以看到 ::before。

#home .image::before {
  content: 'asdasd';
  height: 100%;
  width: 100%;
  background: rgb(92, 226, 43);
  position: absolute;
  top: -16.8%;
  left: 16.7%;
  z-index: 1;
}

<div id="home">
  <div class="image">
    <img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZ3JhbW1lcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="Código de Programação" />
  </div>
</div>

CSS 伪元素“::Before”无效

CSS pseudo-element "::Before" does not work

html

css

pseudo-element