How to style React + StyledComponents pseudo-element?

Question

css

There is an ArticleInfo component:

const ArticleInfo = ({key, name, url, text}) => (
    <Article key = {key}>
        <h3>{name}</h3>
        <p>{text}</p>
    </Article>
)

It is rendered like this: How can I specify for each pseudo-element in the loop?
{features.map(item => ArticleInfo(item))}
background: url(${url})

Answer 1

const Article = styled.div`
  &:before {
    background-image: url(${props => props.beforeImage});
  }
  &:after {
    background-image: url(${props => props.afterImage});
  }
`;

<Article beforeImage={beforeImage} afterImage={afterImage}>
  {/* ... */}
</Article>