title: Before and After pseudo classes used with styled-components
body: <p>What is the proper way to apply <code>:before</code> and <code>:after</code> pseudo classes to styled components?</p>
  
  <p>I know that you can use </p>
  
  <p><code>&amp;:hover {}</code></p>
  
  <p>to apply the <code>:hover</code> pseudo class to a styled-component. </p>
  
  <p>Does this work for All pseudo elements like before and after? </p>
  
  <p>I have tried using the <code>&amp;:before</code> and <code>&amp;:after</code> strategy with some rather complex examples and i'm not sure if my attempts are not working because i've got something wrong with my example or it just doesn't work like that. </p>
  
  <p>Does someone have some insight on this? Thank you.</p>