nbsp not working in CSS content tag

Question

Possible Duplicate:
Adding HTML entities using CSS content

#sitenavmenu-content-menu li:before
{
    content:"|&nbsp;&nbsp;";
}

I want to add a | and two spaces before each list item. However, for some reason it prints the word nbsp and not the space. Any ideas?

Sometimes the best selector is with "no pipe at begin", so `li:not(:first-child):before` — Peter Krauss, Dec 27 '17 at 07:37

score 361 · Accepted Answer · edited Jun 29 '18 at 13:38

361

This could be the answer you are looking for :

content: "|\00a0\00a0";

edited Jun 29 '18 at 13:38

Chris Calo

7,518
7
48
64

answered Jul 24 '12 at 18:34

agacode

3,634
1
14
2

8

You forgot the pipe character: content:"\007C\00a0\00a0"; Though just: content:"\007C"; and a bit of margin-right might be more scalable – Martin Dec 27 '13 at 17:30
24

`"\7C\a0\a0"` will also work. – Oriol Feb 25 '15 at 12:40
6

Why do you need to escape the `|`? – TWiStErRob Jun 13 '15 at 11:58
Thanks for this solution. I used it in my similar situation...I had an id with a non-breaking-space in it: ``. To target that in css I needed to use `#Hello\00a0World` and then it worked. – Heraldmonkey Jun 30 '15 at 09:35
I suggest: `content: "\007c"; margin-right: 2ch;` because 2ch is twice the width of the current font's '0' character. See the [MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/length#ch), and [CanIUse.com](http://caniuse.com/#feat=ch-unit) – Feb 11 '17 at 16:40
@Oriol, today most of web pages are UTF-8 and the `\00` is to a "safe UTF-8 representation". – Peter Krauss Dec 27 '17 at 07:31
1

@TWiStErRob , good question. You not need to escape, and it **is a good practice to express visible characters as it in UTF-8**. `content: "|\00a0\00a0";` – Peter Krauss Dec 27 '17 at 07:32
2

oops, see [benchmark](https://stackoverflow.com/a/1412764/287948), the secure is with 3 zeros, `\0000a0`, to avoid parse problems when mixing content as `cotentent: "|\0000a0Break"` for "| Break". – Peter Krauss Dec 27 '17 at 07:48
45

If you just need _ _, then `content: "\a0"` – Volodymyr Kotylo Jun 07 '18 at 09:01
For a quad space, use `content: "\2001";`. For more types of whitespace, see: https://en.wikipedia.org/wiki/Whitespace_character – Jens Jensen Apr 27 '22 at 10:00

score -3 · Answer 2 · answered Jun 03 '10 at 10:55

-3

Fixed it by copying and pasting the non-breaking space from character map into my code editor.

answered Jun 03 '10 at 10:55

NibblyPig

51,118
72
200
356

20

Works but I would not do it that way. Too easy to break. – Tomalak Jun 03 '10 at 11:04
This works as well – Shanimal Jun 26 '16 at 04:09

nbsp not working in CSS content tag

2 Answers2

Linked