如何让`:active::after`像`:hover::after`那样工作？

Question

当我在我的自定义按钮组件上使用&:hover::after (使用样式组件btw)时，一切工作正常。但是，当我切换到&:active::after时，要在单击按钮时生成动画，什么都不起作用。有什么想法吗？

    /* Content under the drip */
    content: 'DEPOSIT'; 
    font-size: 1.2rem;
    font-family: sans-serif;
    color: white; /* Color of text */
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-wrap: nowrap;
  }

  &:hover::after {
    /* The drip overlay */
    content: "";
    position: absolute;
    bottom: -50%;
    left: -25%;
    height: 550%;
    width: 150%;
    background: linear-gradient(to right, hsl(321, 98%, 60%), hsl(321, 98%, 75%)); /* Color of moving object */
    border-radius: 40%;
      animation: ${spin} 6s ease-out forwards;
    }
  }`;

Answer 1

:active状态应该与:hover的工作方式相同，但它非常不稳定，因此很难获取。你可以使用浏览器开发工具来强制元素状态，这样你就可以检查它了。屏幕截图显示了Chrome Devtools，但此功能在所有主要浏览器中都可用。

我希望这有助于找出:active状态是否真的没有出现。

​

​

Answer 2

解决方案是制作一个在两种样式之间切换的onClick道具，例如，使用布尔开关，创建一个带有两个动画的单个按钮的错觉。