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