title: How to render pseudo before content dynamically in styled-component
body: <p>I'm having a trouble of rendering pseudo before content dynamically in styled-components.</p>
  
  <p>Am I doing something wrong?</p>
  
  <p>I have no problem when I render pseudo before content statically, but it doesn't work when I try it dynamically.</p>
  
  <h1>React Component</h1>
  
  <pre><code>const Test = (props) =&gt; {
  
      return (
          &lt;Text before={12345}&gt;
              {props.children}
          &lt;/Text&gt;
      );
  
  };
  </code></pre>
  
  <h1>Styled Component(Not Work)</h1>
  
  <pre><code>const Text = styled.span`
  
      &amp;:before {
          content: ${props =&gt; {
              console.log(props.before); // I see '12345' in log.
              return props.before;
              }
      }
  
  
  `;
  </code></pre>
  
  <h1>Styled Component(This works fine)</h1>
  
  <pre><code>const Text = styled.span`
  
      &amp;:before {
          content: '12345'
      }
  
  
  `;
  </code></pre>