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

Why does my pseudo element ::before does not work? I have a with a element nested within and it does not work. Im using the Live preview extention on VSCode, and when I press "f12" there is no ::before.

Here is the code

HTML

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

and the 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;
}

CodePudding user response：

Is there an element outside of of the .image div in your test page? I can see the ::before if I do that.

#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 >
    <img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZ3JhbW1lcnxlbnwwfHwwfHw=&auto=format&fit=crop&w=500&q=60" alt="Código de Programação" />
  </div>
</div>