title: Does React Emotion support ::before/ ::after selectors?
body: <p>I am trying to use <a href="https://emotion.sh/docs/introduction" rel="nofollow noreferrer">React Emotion</a> to set up a horizontal rule with text in the middle. It would look like this:</p>
  <blockquote>
  <p><code>----------------------SOME TEXT----------------------------------</code></p>
  </blockquote>
  <p>I found examples on StackOverflow on how to do this with CSS, but it's not working for me.</p>
  <p>Here is my DIV that I'm using, but it's not working.</p>
  <p>Is this possible to set up with react Emotion? What am I missing?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div
    css={{
      display: 'flex',
      lineHeight:'1em',
      color:'gray',
      '&amp;:before, &amp;:after': {
          content:'',
          display:'inline-block',
          flexGrow:'1px',
          marginTop:'0.5em',
          backgroundColor:'gray',
          height:'1px',
          marginRight:'10px',
          marginLeft:'10px'
      }
     
    }}
  &gt;
    SOME TEXT
  &lt;/div&gt;
  </code></pre>