sass - CSS ::after pseudo-element combination with pseudo class :not() doesn't work

Question

I have an issue I'm actually creating a simple landing page in HTML and pre-processor SASS, and in my nav element, I have an (ul) element that contain 4 (li) element, and indise them there is a link tag (a), my HTML looks like this:

 <!-- 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>

I create an (li)::after pseudo-element and I positioned them with position absolute, then I had position relative to the (li) element:

-The (li) elements style:

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

The style for the (li) ::after pseudo-element, with a :not pseudo-classes to don't apply the style to the last (li) item that have an additional class to grab it (.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;
                }

By default the after pseudo-element have a width of 0 (invisible), and when the user hover on the (li), that have to transition to width of 60% to make it visible:

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

Some visuals for better understanding:

-The Nav by default:

-The Nav when the user is hovering the (li) element (HOME for the example):

The problem is when I don't specify the :not() pseudo classes the after element applies to all li element event the last (and I don't wan't it because it is button with special style), and if I specify the :not(.active_button) to try to not touch the last li (button SIGN IN), all the ::after don't showing/working and nothing happens.

PS: I use the SASS pre-processor, maybe I didn't put the selector in the good place,with all the nested element SASS is difficult to read, but that would surprise me, because the hover is working ..

All Sass code for the party that interests us :

  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;
                }
            }

I don't know why ?

Thank you.

question from:https://stackoverflow.com/questions/65937298/css-after-pseudo-element-combination-with-pseudo-class-not-doesnt-work

Answer 1

Waitting for answers