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 ?
CSS
css-contant
html
html entities
- asked 10 years ago
- B Butts
2Answer
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/
- answered 10 years ago
- Sunny Solu
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.
- answered 10 years ago
- Gul Hafiz
Your Answer