Hi, what's the difference in these two ways.

[c0sc0s]

1:

style.div`
  .list a {
     &::after {
      
     }
  }
`

2:

style.div`
  .list a {
     ::after {

     }
  }
`

At first time, i used the second way in my project, and it's unuseful, but when i change it to the first way, it's run.
But i can't understand why?
plz.

[Foxeian]

Pseudo-selectors in styled-components works just like in CSS. (or rather, Sass)

Here is an example of how to use a simple :after:

const HelloDiv = styled.div`
  &:after {
    content: "👋";
  }
`;

<HelloDiv>Hello</HelloDiv> // renders: "Hello 👋"

If the styled component is the same as the target element. You can do the following:

const Hello = styled.a`
  &:hover:before {
    width: 100%;
  }
`;

If you are targeting an element nested inside the styled component:

const Hello = styled.div`
  a:hover:before {
    width: 100%;
  }
`;

[Choi-Jiwon-38]

The reason the first method works and the second one doesn't is because in the first method, &::after refers to the full selector, including the parent selector. The & symbol represents the current selector (in this case, .list a), and ::after is added to it.

.list a::after {
  /* styles */
}

In the second method, there's no & before ::after, meaning it doesn’t connect with the parent selector. As a result, the browser doesn’t recognize the second approach, and the styles aren’t applied.

In short, &::after ensures that the selector is correctly compiled as .list a::after, which is why the first approach works.