How to use :not(.className) and pseudo selector after in React using Emotion.js

Question

how can you achieve somthing like this in emotion

.navBar__Link:not(.noborder)::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    height: 15px;
    width: 0;
    z-index:-1;
    
    background-color: var(--colorPrimary);
    transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Answer 1

You can use Composition and String Styles to achieve this. please refer to the documentation.

  css`
   &:not(.noborder)::after navBar__Link {
     content: '';
     position: absolute;
     top: 50%;
     left: 10px;
     height: 15px;
     width: 0;
     z-index:-1;
    
     background-color: var(--colorPrimary);
     transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
`;