How to render pseudo before content dynamically in styled-component

Question

I\'m having a trouble of rendering pseudo before content dynamically in styled-components.

Am I doing something wrong?

I have no problem when I render pseudo bef

Answer 1

That is because content value must be within quotes in css

Example:

const Block = styled.div`
    &:before {
        display: absolute;
        top:0;
        content: '${props => props.before}'
    }
`

Please note that I am leveraging ES6 new features wherein a single statement function there is no need to use curly braces {} and return.

Codepen: https://codepen.io/metju/pen/zEKeOm