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

Answer 2

styled-components works the same as in sass, nothing different

const Text = styled.span`
    &:before {
       content: ${props => !!props.before ? props.before : "                                                                     

                                                        
            

Answer 3

What I did is use the css helper function for this:

const Text = styled.span`
  &:before {
     ${props => !!props.before ?
      css`content: props.before;` : css`content: '