Adding HTML entities using CSS content

CSS is not HTML.   is a named character reference in HTML; equivalent to the decimal numeric character reference  . 160 is the decimal code point of the NO-BREAK SPACE character in Unicode (or UCS-2; see the HTML 4.01 Specification). The hexadecimal representation of that code point is U+00A0 (160 = 10 × 16¹ + 0 × 16⁰). You will find that in the Unicode Code Charts and Character Database.

In CSS you need to use a Unicode escape sequence for such characters, which is based on the hexadecimal value of the code point of a character. So you need to write

.breadcrumbs a:before {
  content: '\a0';
}

This works as long as the escape sequence comes last in a string value. If characters follow, there are two ways to avoid misinterpretation:

a) (mentioned by others) Use exactly six hexadecimal digits for the escape sequence:

.breadcrumbs a:before {
  content: '\0000a0foo';
}

b) Add one white-space (e. g., space) character after the escape sequence:

.breadcrumbs a:before {
  content: '\a0 foo';
}

(Since f is a hexadecimal digit, \a0f would otherwise mean GURMUKHI LETTER EE here, or ਏ if you have a suitable font.)

The delimiting white-space will be ignored, and this will be displayed  foo, where the displayed space here would be a NO-BREAK SPACE character.

The white-space approach ('\a0 foo') has the following advantages over the six-digit approach ('\0000a0foo'):

• it is easier to type, because leading zeroes are not necessary, and digits do not need to be counted;
• it is easier to read, because there is white-space between escape sequence and following text, and digits do not need to be counted;
• it requires less space, because leading zeroes are not necessary;
• it is upwards-compatible, because Unicode supporting code points beyond U+10FFFF in the future would require a modification of the CSS Specification.

Thus, to display a space after an escaped character, use two spaces in the stylesheet –

.breadcrumbs a:before {
  content: '\a0  foo';
}

– or make it explicit:

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

See CSS 2.1, section "4.1.3 Characters and case" for details.

Update: PointedEars mentions that the correct stand in for   in all css situations would be
'\a0 ' implying that the space is a terminator to the hex string and is absorbed by the escaped sequence. He further pointed out this authoritative description which sounds like a good solution to the problem I described and fixed below.

What you need to do is use the escaped unicode. Despite what you've been told \00a0 is not a perfect stand-in for   within CSS; so try:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

Specifically using \0000a0 as  . If you try, as suggested by mathieu and millikin:

content:'No\00a0Break'   /* becomes No਋reak */

It takes the B into the hex escaped characters. The same occurs with 0-9a-fA-F.

In CSS you need to use a Unicode escape sequence in place of HTML Entities. This is based on the hexadecimal value of a character.

I found that the easiest way to convert symbol to their hexadecimal equivalent is, such as from ▾ (▾) to \25BE is to use the Microsoft calculator =)

Yes. Enable programmers mode, turn on the decimal system, enter 9662, then switch to hex and you'll get 25BE. Then just add a backslash \ to the beginning.

Use the hex code for a non-breaking space. Something like this:

.breadcrumbs a:before {
  content: '>\00a0';
}

There is a way to paste an nbsp - open CharMap and copy character 160. However, in this case I'd probably space it out with padding, like this:

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

You might need to set the breadcrumbs display:inline-block or something, though.

For Example :

http://character-code.com/arrows-html-codes.php

Example: If you want select your character , I selected "&#8620" "&#x21ac" (We use HEX values)

.breadcrumbs a:before {
  content: '\0021ac';
}

Result: ↬

Thats it :)

I know this is an pretty old post, but if spacing is all your after, why not simply:

.breadcrumbs a::before {
  content: '>';
  margin-left: 8px;
  margin-right: 8px;
}

I have used this method before. It wraps perfectly fine to other lines with ">" by its side in my testing.

Here are two ways:

• In HTML:

  <div class="ics">&#9969;</div>

This will result into ⛱

• In Css:

  .ics::before {content: "\9969;"}

with HTML code <div class="ics"></div>

This also results in ⛱

Just to make the answers here a little more complete. If you are using something like content: attr(aria-label);, then rather than using unicode escapes, you DO need to use HTML entities instead. For example, using 
 to generate a line break.

Consider setting up variables for line breaks and/or HTML entities you know off the top of your head. Though the question didn't include a need for a line break, I'm including it for posterity:

:root {
  --br: '\0a';
  --nbsp: '\a0';
}

Depending on your needs, you can do one of these:

.breadcrumbs a:before {
  content: var(--nbsp); /* non-breaking space */
}

.breadcrumbs a:before {
  white-space: pre; /* preserves all whitespace */
  content: ' '; /* a (preserved) space */
}

.breadcrumbs a:before {
  white-space: pre; /* preserves all whitespace */
  content: var(--br) ' '; /* linefeed followed by a (preserved) space */
}

.breadcrumbs a:before {
  white-space: pre-line; /* preserves line breaks (`pre` for all whitespace also works) */
  content: var(--br) var(--nbsp); /* linefeed followed by non-breaking space */
}