Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

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

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:

enter image description here

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

enter image description here

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...