pseudo.css

/*
pseudo elements ::before ::after CONTENT not element
content: '' -- required
img --- does not work
*/

p::before {
  content: "Hello";
  display: block;
  background: burlywood;
  font-weight: bold;
  font-size: 2rem;
  color: rebeccapurple;
}
p::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: grey;
}
div {
  width: 50vw;
  margin: 100px auto;
  position: relative;
}
img {
  width: 100%;
  display: block;
}
div::before {
  content: "";
  border: 2px solid grey;
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  top: -40px;
  left: 40px;
  z-index: -2;
  transition: all 0.5s linear;
}
div::after {
  content: "";
  background: gray;
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  top: -20px;
  left: 20px;
  z-index: -1;
  transition: all 0.5s linear;
}
div:hover::after,
div:hover::before {
  top: 0;
  left: 0;
}