Placing Unicode Character in CSS Content Value

Placing Unicode character in CSS content value

Why don't you just save/serve the CSS file as UTF-8?

nav a:hover:after {
    content: "↓";
}

If that's not good enough, and you want to keep it all-ASCII:

nav a:hover:after {
    content: "\2193";
}

The general format for a Unicode character inside a string is \000000 to \FFFFFF – a backslash followed by six hexadecimal digits. You can leave out leading 0 digits when the Unicode character is the last character in the string or when you add a space after the Unicode character. See the spec below for full details.

---

Relevant part of the CSS2 spec:

Third, backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:

1. with a space (or other white space character): "\26 B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single white space character.
2. by providing exactly 6 hexadecimal digits: "\000026B" ("&B")

In fact, these two methods may be combined. Only one white space character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must be doubled.

If the number is outside the range allowed by Unicode (e.g., "\110000" is above the maximum 10FFFF allowed in current Unicode), the UA may replace the escape with the "replacement character" (U+FFFD). If the character is to be displayed, the UA should show a visible symbol, such as a "missing character" glyph (cf. 15.2, point 5).

• Note: Backslash escapes are always considered to be part of an identifier or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not).
  
  The identifier "te\st" is exactly the same identifier as "test".

---

Comprehensive list: Unicode Character 'DOWNWARDS ARROW' (U+2193).

Unicode via CSS :before

The escaped hex reference of  is \f066.

content: "\f066";

Adding HTML entities using CSS content

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/

Allowed characters in CSS 'content' property?

The rules for “escaping” characters are in the CSS 2.1 specification, clause 4.1.3 Characters and case. The special rules for quoted strings, as in content property value, are in clause 4.3.7 Strings. Within a quoted string, any character may appear as such, except for the character used to quote the string (" or '), a newline character, or a backslash character \.

The information that you must use \ escapes is thus wrong. You may use them, and may even need to use them if the character encoding of the document containing the style sheet does not let you enter all characters directly. But if the encoding is UTF-8, and is properly declared, then you can write content: '☺ Я Ω ⁴ ®'.

CSS:after encoding characters in content

To use encoded Unicode characters in content you need to provide either the characters themselves (as you do), or their UTF-8 escape sequences instead of HTML entities:

a.up:after { content: " \2193"; }
a.down:after { content: " \2191"; }   

css content character rendering strange

Despite what many website say character 25b6 doesn't work the same in all browsers. After looking in Character Map in Windows for the Ariel font I found that 25ba also gives the same character (well close enough). After updating my css with 25ba instead of 25b6 it shows correctly in all browsers I can test against.

It appears that with 25b6 edge just changes it to an emoticon and even adding fe0e after it doesn't stop edge from changing it.

Unicode character as bullet for list-item in CSS

EDIT

I probably wouldn't recommend using images anymore. I'd stick to the approach of using a Unicode character, like this:

li:before {
  content: "\2605";
}

OLD ANSWER

I'd probably go for an image background, they're much more efficient versatile and cross-browser-friendly.

Here's an example:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

How to add html special character (right-arrow) using content property of css?

Special characters work a little bit different with pseudo-elements. You can't use HTML entities in CSS, but you can use Unicode hex escapes. Here is a tool to convert the numeric value of the special character to the CSS value.

http://www.evotech.net/articles/testjsentities.html

for example ► needs to be \25BA

working example:

http://jsfiddle.net/L6suy/

.right-arrow:after {
    content:'\25BA'
}

---

Related Topics