::after isn't working with React props but works with regular text

Question

I have a react component that gets some properties. One of them is altText. I want my div to have an ::after, with content being the prop altText.

I tried something like (styled-components):

const StyledImage = styled.div`
    &::after {
        content: ${props => props.altText};
        color: black;
    }
`;

//

export const Image = ({src, altText, size, scale}) => {
    const imageProps = {
        src: src,
        altText: altText,
        size: size,
        scale: scale,
    }

    return (
        <StyledImage {...imageProps}>
            <img src={imageProps.src} alt={imageProps.altText}/>
        </StyledImage>
    )
}

(I'm not talking about the alt of the img, it's something else)

I call this component as follows:

<Image src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" altText="hello"/>

That doesn't work. However when I change content: ${props => props.altText}; to content: 'hello' it works perfectly fine. I made sure that altText is a string an it is.

What's the problem here?

Answer 1

(Jayce444's answer):

Can't test at the moment, but have you tried putting quotes around the altText value, i.e. something like content: '${props => props.altText}';