Adding HTML entities using CSS content

Question

How do you use the CSS content property to add html entities?

Using something like this just prints   to the screen instead of the non-breaking space:

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

Answer 1

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 ⛱

Answer 2

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.

Answer 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.