CSS ::after 伪元素与伪类的组合：not() 不起作用

Question

我有一个问题，我实际上是在 HTML 和预处理器 SASS 中创建一个简单的登录页面，并且在我的 nav 元素中，我有一个 (ul) 元素 包含4 (li) 元素，并且在它们中间有一个链接标签(a)，我的HTML 如下所示：

 <!-- NAVBAR -->
       <nav>
           <!-- LIST -->
           <ul class="list_items">
               <!-- ITEMS -->
               <li class="item"><a href="">Home</a></li>
               <li class="item"><a href="">Our app</a></li>
               <li class="item"><a href="">Contact</a></li>
               <li class="item active_button"><a href="">Sign up</a></li>
           </ul>
       </nav>

我创建了一个 (li)::after 伪元素，然后我用绝对位置定位它们，然后我有相对于 (li) 元素的位置：

-(li) 元素样式：

li {
     list-style: none;
     position: relative;

的样式 (li) ::after 伪元素，带有 :not 伪类不将样式应用于最后一个 (li) 项目，该项目具有附加类来抓取它（.active_button）：

 &::after:not(.active_button){
                    content: "";
                    height:10%;
                    width:0;
                    background:linear-gradient(45deg,#8d56c0 60%,#417be7);
                    position: absolute;
                    bottom:-25%;
                    right:calc(20% - 2px);
                    transition: width .25s linear;
                }

默认情况下after伪元素的宽度为0（不可见），当用户悬停在(li) ，必须转换为 60% 的宽度以使其可见：

&:hover::after{
   width:calc(60% + 4px);
}

一些便于理解的视觉效果：

-默认导航：

-当用户悬停在 (li) 元素上时的 Nav（例如 HOME）：

问题是当我没有指定 :not() 伪类时，after 元素最后应用于所有 li 元素事件（我不想要它，因为它是具有特殊样式的按钮) 和 如果我指定 :not(.active_button) 尝试不触摸最后一个 li（按钮登录），所有 ::after 不显示/工作，什么也没有发生。

PS：我使用的是 SASS 预处理器，也许我没有把选择器放在合适的位置，所有嵌套的元素 SASS 很难阅读，但那会让我感到惊讶，因为悬停正在起作用..

我们感兴趣的一方的所有 Sass 代码：

  li {
                list-style: none;
                position: relative;

&:hover::after{
    width:calc(60% + 4px);
}

                &::after{
                    content: "";
                    height:10%;
                    width:0;
                    background:linear-gradient(45deg,#8d56c0 60%,#417be7);
                    position: absolute;
                    bottom:-25%;
                    right:calc(20% - 2px);
                    transition: width .25s linear;
                }

                a {
                    text-decoration: none;
                    font-size: 1.5em;
                    padding: .5em 1.5em;
                    font-weight: 300;
                    color: #8b4cc5;
                }

            }
            .active_button {
                a {
                    background-color: #01709c;
                    color: white;
                    border-radius: 12.5px;
                }
            }

我不知道为什么？

谢谢。