HTML Special Characters in CSS "Content" Attribute

html special characters in css content, using attr()

Escape sequences in CSS are only treated specially in CSS syntax. When you specify it in an HTML attribute value then use that value in CSS attr(), it is taken literally. From the CSS2.1 spec:

attr(X)
This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. [...]

Since you're specifying character codes in HTML attribute values, you can either use HTML character references, entity references or the Unicode characters themselves. It's worth noting that the two character codes you have do not appear to be valid, however, so they may not work at all.

EDIT: [...] Essentially, I thought CSS attr() would copy over an HTML attribute literally, but that is not the case.

It copies the attribute value according to the DOM, which may be different from how it is represented in the source, e.g. the source markup, or the script that is generating the element.

For example, if the source is represented in raw HTML markup, then as I mention above, you will need to use HTML character escapes, because HTML is parsed by an HTML parser. If the elements are generated using a JS-based template engine such as Jade, then the character escapes take the form of \u followed by the hexadecimal code-points. In both cases, the respective parsers will translate the escape sequences into their representative characters, and the characters themselves are what is stored in the DOM as part of the attribute value.

Of course, again there's always the alternative of just using the Unicode characters directly. If your source files are all encoded as UTF-8, you should have no problem using the characters directly.

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: '☺ Я Ω ⁴ ®'.

HTML special characters in CSS content attribute

Try this:

#target:before {
  content: "\2611";
}

Escaping special chars in CSS content property?

You could try using the Unicode value like so:

a.flags::after {
    content:"Espa\00F1ol";
}

Which should return the normal Español when used in content as can be seen here: https://jsfiddle.net/42Lhjfof/1/

You can find these values by looking them up in the Unicode table, like on: http://www.utf8-chartable.de/

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

Can you use HTML entities in the CSS “content” property?

put hex value of your bullet specail character like this

div:before{
    content:"\2022";
    color:#f00;
}

check this fiddle http://jsfiddle.net/sandeep/HPrkU/1/

NOTE: after & before work in IE8

Insert special character using :before pseudo class in css

Try specifying <meta charset="utf-8">. Ideally you want to set this in the server.

---

Related Topics