title: Is there a way to modify '&:before/:after' to give a dynamic property?
body: <p>A styled-component that has <code>&amp;:before</code> attribute that I want to give access to a dynamic color property. But I'm lost to how to apply that.</p>
  
  <p>I've Tried passing the props to <em><code>&lt;Hover /&gt;</code></em> and it works. But the Triangle in <code>&amp;:before</code> cannot access that.</p>
  
  <pre><code>const Hover = styled.div`
    padding:7px;
    margin: -102px auto;
    border-style: solid;
    border-radius: 15px; 
    border-width: 3px;
    text-align: left;
    font-weight: 400;
    font-size: 19px;
    color: #000000;
    font-family: sans-serif;
    position: absolute;
    left:-15px;
    z-index:10;
  
     &amp;:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 10px solid ;
    border-right: 10px solid transparent;
    border-top: 10px solid ;
    border-bottom: 10px solid transparent;
    left: 19px;
    bottom: -19px;
    z-index:10;
  
  }
  `;
  </code></pre>
  
  <p><strong>As a single styled-component the following class is:</strong></p>
  
  <pre><code>class MarkerHover extends Component {
  
      render() {
          const {color, children}= this.props
          return (
  
  
              &lt;Hover style={{backgroundColor: color }}&gt;
             {...children}
                  &lt;/Hover&gt;
  
  
          );
      }
  }
  
  export default MarkerHover;
  </code></pre>
  
  <p>I expect to have a whole colored Window after successfully passing the color props to the <code>&amp;:before</code> division.</p>