10

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';
  }
`
svnm
  • 22,878
  • 21
  • 90
  • 105
  • Is this issue observed in all browsers or any specific browser? – user6297534 May 22 '17 at 15:16
  • Try using `'\d7'` – sol May 22 '17 at 15:23
  • 4
    I'm not sure if this is the answer, not having used the tech, but from a basic JavaScript standpoint, you've got a string within a string. So, the first pass at the outer string the escaped character will be interpreted as JS would. Namely, a null character (`\0`) followed by three characters. I'd suggest escaping the backslash, i.e., `content: '\\00d7';`. – Heretic Monkey May 22 '17 at 15:23
  • Unfortunately neither of those worked `'\d7'` or `'\\00d7'` and the issue is present on all browsers. – svnm May 22 '17 at 16:39
  • 1
    Double backslash worked for me. A single backslash used to work with styled-components. Not sure what they changed here. – greenimpala May 23 '17 at 14:58
  • What does &: signifies here ? – vikramvi Jun 03 '21 at 12:25

3 Answers3

26

I think you need a combination of the two comments: 

content: "\\d7"

This works for me.

barro32
  • 2,559
  • 23
  • 36
1

Try updating the reference to:

content: '×';

Further alternative encoding formats are available on https://brajeshwar.github.io/entities/.

Conan
  • 2,659
  • 17
  • 24
  • Unfortunately that didn't work. However interestingly copy pasting the symbol in: `content: '×';` did work. So thank you for the link. – svnm May 22 '17 at 16:42
0

See if the problem isn't the quotes

content: '"\\00d7"'

I had this issue when using props with a ternary operator

Lucas Steffen
  • 1,244
  • 2
  • 10
  • 22