The Set-Up

Let’s say you want an inline list to render like this:

Item 1 \ Item 2 \ Item 3

You might be tempted to do this:

.backslash_list > li:after {
   content: '\'
}

But then you would remember,

"D’oh, that’s right—a backslash character is used to escape ASCII sequences for the content property”.

So you now make sure that you escape that backslash with another backslash.

.backslash_list > li:after {
   content: '\\'
}

This will work…except when it doesn’t. Here’s where everything starts to break down and go wrong.

The Problem

A CSS rule like this will likely live in a top-level CSS file. Even if it doesn’t get defined directly in your global.css file, your compression script may very well be set up to include this rule (wherever it’s defined) alongside other CSS.

As it turns out, Safari 5.1 and 5.0 don’t like this…at all. What ends up happening? Every CSS rule on the same line after this character sequence will be ignored. The result is not pretty:

The Solution

You probably already guessed (hint: it happened during your moment of clarity when you went to escape the first backslash): use the ASCII code for the backslash character:

.backslash_list > li:after {
   content: '\005C'
}

Muuuuuuch better :)

I hope this saves at least one of you from this obscure bug in the future!