Css 向伪元素（SASS）添加转换

我试图在hover上逐渐更改div的背景，而不是立即更改，但是在将转换应用到伪元素时遇到了问题。这就是我试过的-

@mixin project-styling($url) {
  background: url($url);
  background-size: cover;
  overflow: hidden;
  transition: all 2s;

  &:hover:after {
    background-color: rgba(0, 0, 0, 0.7);
    content: '';
    width: 400px;
    height: 300px;
  }
}

div {
  @include project-styling('image.png');
}

---

转换也需要在伪元素上进行。当div未悬停时，也没有包含伪元素

    @mixin project-styling($url) {
      background: url($url);
      background-size: cover;
      overflow: hidden;
      transition: all 2s;

      &::after {
         background-color: rgba(0, 0, 0, 0.7);
         content: '';
         width: 400px;
         height: 300px;
         transition: all 2s;
      }

      &:hover::after {
        background-color: rgba(0, 0, 0, 1);
      }
    }

    div {
      @include project-styling('image.png');
    }

---

您需要提供一个工作代码段