Do psuedo selectors work in styled-components the same as in css with unicode characters

Viewed 4324

I have the following styled-component, and I am trying to add a unicode character \00d7 as the content for a pseudo selector, which is a cross or close icon.

However this doesn't seem to work as it would in css. Of course I can use an svg for this close icon as an alternative, I was just curious if this is possible with styled-components? It seems to allow blank pseudo selector's though e.g. ''

const Close = styled.span`
  color: pink;
  &:before {
    content: '\00d7';
  }
`
3 Answers

I think you need a combination of the two comments:

content: "\\d7"

This works for me.

See if the problem isn't the quotes

content: '"\\00d7"'

I had this issue when using props with a ternary operator

Related