Css:After Encoding Characters in 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"; }

Content for '★' in CSS appears as 'â˜…'

Probably the text encodings (character sets) for your CSS and HTML files do not agree.

To set a stylesheet's encoding, use @charset; for example:

@charset "UTF-8";

To set an HTML page's encoding, use a <meta> tag (in the <head> section at the top); for example:

<meta http-equiv="Content-type" content="text/html;charset=utf-8">

or in HTML 5:

<meta charset="UTF-8">

The @charset of a stylesheet must agree with the encoding chosen for its HTML page.

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.

â€“ encoding of em dash when inserted using CSS :after

While setting the correct encoding is always a good thing to do, I try to avoid this situation entirely and use only ASCII characters in HTML, JavaScript and CSS:

content:"\2014"

Unicode characters are represented by \hexValue in CSS.

Beware that if the following character is 0-9 or a-f (or A-F), it will be considered part of the unicode character. You can put a space after it: "\2014 stuff", and the space won't be displayed (it just marks the end of the character). To actually put a space after it, use two spaces.

Copyright Symbol in CSS :after Pseudo-Element

CSS doesn't use HTML's entities; it uses its own unicode escape sequences.

You need to use \00a9 for the copyright symbol.

body:after {
  content:"\00a9 me";
}

See here for a cheat-sheet table which shows just about every entity/unicode string you'd ever need: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Use special characters in the CSS content

The results are the same if the character encoding of the file containing this code has been appropriately declared. See the W3C page Character encodings and the linked resources, but note that the advice “Try to avoid using the byte-order mark in UTF-8” is not correct. Using the byte order mark (BOM) adds extra protection; advice to the contrary is either outdated or relates to PHP, which is a different issue. So basically you should save your CSS file as UTF-8 encoded with BOM.

Using references like "\263A" avoids the character encoding issue, at the cost of source readability. The rest is rather opinion-based.

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:

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.

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

Adding HTML entities using CSS content

You have to use the escaped unicode :

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

More info on : http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Css:After Encoding Characters in Content