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: ' ';
}

mathieu_971 · Answer

You have to use the escaped unicode :

Like

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

John_Millikin_3560 · Answer

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

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

user_1562842 · Answer

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.

user_2754038 · Answer

Here are two ways:

This will result into ⛱

with HTML code

This also results in ⛱