Before and After pseudo classes used with styled-components

Question

What is the proper way to apply :before and :after pseudo classes to styled components?

I know that you can use

&:hover

Answer 1

This is good and simple answer:

https://stackoverflow.com/a/45871869/4499788 by mxstbr

but for elements requiring more complex logic I prefer this approach:

const Figure = styled.div`
  ${Square}:before, 
  ${Square}:after,
  ${Square} div:before, 
  ${Square} div:after {
    background-color: white;
    position: absolute;
    content: "";
    display: block;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
`;