did anyone know why my css not working? every class is working but my before and after is not working. Here is my html : https://pastebin.com/hzzFJHq2

and here is my css

.item {
  position: relative;
  border: 2px solid white; /* Border utama */
  transition: transform 0.3s, box-shadow 0.3s;
}

.item:hover {
  --expand: 1;
  box-shadow: 0px 8px 15px rgba(255, 255, 255, 0.2);
}

.item::before,
.item::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: hsl(0, 0%, 5%);
  border: 2px solid white;
  top: 0;
  left: 0;
  z-index: -1;
  transition: transform 0.3s;
}

.item::before {
  transform: translate(-5%, -5%);
}

.item::after {
  transform: translate(-10%, -10%);
}

.item:hover::before {
  transform: translate(-3%, -3%);
}

.item:hover::after {
  transform: translate(-6%, -6%);
}

.item__content {
  transition: transform 0.3s;
  transform: translate(calc(var(--expand) * -4%), calc(var(--expand) * -4%));
}

a {
  color: #C7EDEF;
  text-decoration: none;
}

my expectation is want to create hover effect like this
expectation

but my code turn like this

my code