I'm unable to figure out how to pass a background url to :after of a className that I am getting from props. Here are my relevant Javascript and CSS methods/classes:

Card.js

const Card = props => (
    <OnVisible
        visibleClassName="card-appear"
        percent={50}
        className={classnames(
            "article-card p-8 pb-0",
            props.cardBackground,
            props.cardMobile,
            props.cardCollection
        )}
    >
        <ArticleHeader/>
        <ViewArticle/>
    </OnVisible>
);

styles.css

.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: "";
  background: url(https://source.unsplash.com/user/erondu/1600x900);
  opacity: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

As you can see above, I would like to pass a custom background url to :after from props instead of assigning a static url in css.