Is it possible to translate pseudo element as css content with React Intl?

Question

I need some help. I'm new to React and I'm trying to translate app with ReactIntl and FormattedMessage. My question is: "Can I translate content of css pseudo element ::before, that is located in my App.css file?" And if it's possible, how? :-)

    .btnAdd::before {
  content: "Add";
}

Thanks!

Not possible. but you can define different classes and pass them dynamically using intl — Abhinav, Apr 20 '22 at 14:15
You need to use styled-component package. Link: https://www.npmjs.com/package/styled-components — kazinayem2011, Oct 19 '22 at 06:51

score 0 · Answer 1 · answered Nov 08 '22 at 16:18

0

A great way is to use html's lang attribute!
Like this:

html[lang="en"] .btnAdd:before {
    content: 'Add';
}
html[lang="pl"] .btnAdd:before {
    content: 'Dodaj';
}
html[lang="it"] .btnAdd:before {
    content: 'Aggiungi';
}

answered Nov 08 '22 at 16:18

Annak942

146
8

Is it possible to translate pseudo element as css content with React Intl?

1 Answers1