父类之前的伪类动画

Question

我试图在父类之前设置伪类的动画。

例如，

.parent {
  opacity: 0;
  animation: fadeIn 1s linear 2s;
  animation-fill-mode: forwards;
  &:before {
    content: 'something';
    position: absolute;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    animation: fadeInOut 2s linear;
    animation-fill-mode: forwards;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    visibility: visible;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

所以在我看来，这应该淡入淡出something然后parent被加载..然而，事实并非如此......我试图取出{{1}但仍然失败......我做错了什么？