如何检查其是否有效::: before？

Question

我创建了:: before effect，这是我的代码

https://stackblitz.com/edit/angular-scss-demo-qchzj6?file=src/app/app.component.scss HTML：

  <a class="is-gradient-button is-button-size" >
    <div class="is-gradient-border-content">
      <span class="is-button-text">Test</span>
    </div>
  </a>

CSS：

.is-gradient-button {
    border: double 2px transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #cd08d2 0%, #298ff1 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.is-gradient-border-content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    &::after {
        box-sizing: inherit;
    }
    &::before {
        box-sizing: inherit;
    }
}

.is-button-size {
    width: 127px;
    border-radius: 23px;
    height: 37px;
    text-align: center;
    transition: all .2s;
    display: block;
    position: relative;
    &::before {
      box-sizing: inherit;
        display: block;
        content: "";
        cursor: pointer;
        background: linear-gradient(90deg, #cd08d2 0%, #298ff1 100%);
        width: 0%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 23px;
        opacity: ;
        transition: width 0.3s, opacity 0.2s cubic-bezier(1, 0.02, 0.59, 0.44);
  }
}

开始时，我们有带有边框和白色背景的按钮。

我想为此效果更改悬停和活动时的样式：

为什么在不工作之前？