Adding HTML entities using CSS content
Solution 1:
You have to use the escaped unicode :
Like
.breadcrumbs a:before {
content: '\0000a0';
}
More info on : http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
Solution 2:
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 × 161 + 0 × 160). 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.
Solution 3:
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.
Solution 4:
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.