0

me encuentro con el siguiente problema, le quiero pasar por props a un styled-component(span) para asignarle ese valor a la propiedad "content" en el before del dicho elemento :

const IconsWrapper = styled.span`
position:relative;
:before{
    position:absolute;
    content:${props => props.description};
    
}

svg{
        color:var(--darkest-gray);
        font-size:40px;
        transition: 300ms ease-in-out;
        :hover{
            color:var(--orange)
        }
    }

`

</TechnologiesHeader>

            <TechnologiesIcons>
                {icons.map((icon) => {
                    return(
                        <IconsWrapper description = {icon.description}>
                            {icon.icon}
                        </IconsWrapper>
                    )
                })
                }
            </TechnologiesIcons>
            
        </TechnologiesContainer>

Una cosa así seria, pero no esta terminado porque no me funciona. No estoy seguro si esto se puede hacer o que parte estoy haciendo mal. Agradecería una ayuda. Muchas gracias

2
  • Que es lo que no funciona? en principio no veo ningún error... Ya re-verificaste que inspeccionando el <before> del elemento no tenga esas propiedades?
    – Pipe
    el 22 abr. 2021 a las 22:56
  • Si inspecciono el elemento así como esta no me aparece el before en el navegador, pero si a content le pongo algo estático como por ejemplo "hola" si aparece en el navegador.. no tengo idea que puede ser
    – darky98
    el 23 abr. 2021 a las 15:22

1 respuesta 1

2

Al inspeccionar en Chrome y en Edge el content aparece sin comillas, si le agrego comillas se muestra sin problemas:

content: "${ props  =>   props.description}"

así debería funcionar

1
  • Ya lo habia podido resolver, y fue asi como lo hiciste. Gracias igual, le puede servir a otra persona. Un saludo
    – darky98
    el 25 abr. 2021 a las 4:50

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.