title: Styled-components multiple Pseudo Elements
body: <p>Sorry I never post here so not sure if this question is asked correctly..</p>
  
  <p>I've been trying to figure out how to do styling like this but cant figure out how that works with styled components.. </p>
  
  <p>Can someone nudge me in the right direction?</p>
  
  <p>How can I do something like this with ReactJS &amp; <a href="https://www.styled-components.com/" rel="nofollow noreferrer">Styled-components</a>?</p>
  
  <pre><code>figure.container .square:before,
  figure.container .square:after,
  figure.container .square div:before,
  figure.container .square div:after {
    /* styling */
  }
  figure.container .square:before,
  figure.container .square:after {
    /* styling */
  }
  figure.container .square div:before,
  figure.container .square div:after {
    /* styling */
  }
  figure.container .square:before,
  figure.container .square div:before {
    /* styling */
  }
  figure.container .square:after,
  figure.container .square div:after {
    /* styling */
  }
  </code></pre>
  
  <p>This is my jsx-structure:</p>
  
  <pre><code>&lt;Figure&gt;
    &lt;Square&gt;
      &lt;div&gt;&lt;/div&gt;
    &lt;/Square&gt;
  &lt;/Figure&gt;
  </code></pre>