Adding HTML entities using CSS content
How do you use the CSS
content property to add html entities?
I have a number of links which I make into a breadcrumb style list by adding an arrow before each.
<div class="breadcrumbs">
<a>One</a>
<a>Two</a>
<a>Three</a>
</div>
Which has the following style applied to it:
.breadcrumbs a:before {
content: '> ';
}
The problem is that when the breadcrumb list gets long and wraps to the next line, the arrow is left on the preceding line. The obvious solution is to change the space into a non-breaking space, but this doesn't work:
.breadcrumbs a:before {
content: '> ';
}
It actually outputs
onto the screen. I've got around this with other strange characters (like ») by pasting the character in directly, but how do you paste a ?Answer:
You have to use the escaped unicode :
Like
.breadcrumbs a:before {
content: '>\0000a0';
}
http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content
