Inserting non-ASCII characters using the :before pseudo element

Question

I have an input field inside a span, so that I can put a pound sign before all input fields in a span with the priceField class. However, because the pound symbol is a special character, I can't get it to render properly. I have tried the ascii dec and hex values, the html number & name and the actual symbol. Everything apart from the symbol print out the actual code, whereas the symbol outputs Â£.

Here is my current css:

#productEditForm .priceField:before {
    position:relative;
    display: block;
    float: left;
    content: "£";
    margin: 9px 4px 9px 2px;
    color: #075946;
}

Any ideas?

What is your document's encoding? – MetalFrog Jul 06 '12 at 15:52 — MetalFrog, Jul 06 '12 at 15:52
Do you have a specific content encoding set? – JAB Jul 06 '12 at 15:52 — JAB, Jul 06 '12 at 15:52

score 5 · Accepted Answer · answered Jul 06 '12 at 16:21

5

You can fix the character encoding mismatch (more info would be needed for instructions on how to do that), or you can use the construct "\a3" instead of "£".

answered Jul 06 '12 at 16:21

Jukka K. Korpela

195,524
37
270
390

score 3 · Answer 2 · answered Jul 06 '12 at 15:53

3

There's a mismatch between the stylesheet encoding and your document encoding. Save both as UTF-8 (or another common encoding)

answered Jul 06 '12 at 15:53

Madara's Ghost

172,118
50
264
308

1

That's it, `£` in UTF-8 is `0xC2 0xA3`, which renders as `Â£` in Latin-1. – Stefan Jul 06 '12 at 16:01

Inserting non-ASCII characters using the :before pseudo element

2 Answers2