title: How to pass background url to :after OnVisible in React
body: <p>I'm unable to figure out how to pass a background url to :after of a className that I am getting from <code>props</code>. Here are my relevant Javascript and CSS methods/classes:</p>
  <p>Card.js</p>
  <pre><code>const Card = props =&gt; (
      &lt;OnVisible
          visibleClassName=&quot;card-appear&quot;
          percent={50}
          className={classnames(
              &quot;article-card p-8 pb-0&quot;,
              props.cardBackground,
              props.cardMobile,
              props.cardCollection
          )}
      &gt;
          &lt;ArticleHeader/&gt;
          &lt;ViewArticle/&gt;
      &lt;/OnVisible&gt;
  );
  </code></pre>
  <p>styles.css</p>
  <pre><code>.article-card {
    flex: none;
    min-height: 400px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    font-family: gingerRegular, sans-serif;
    opacity: 0;
    transition: all 0.5s ease-out;
    cursor: pointer;
  }
  .article-card::after {
    content: &quot;&quot;;
    background: url(https://source.unsplash.com/user/erondu/1600x900);
    opacity: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
  }
  </code></pre>
  <p>As you can see above, I would like to pass a custom background url to :after from <code>props</code> instead of assigning a static url in css.</p>