Escape CSS content, quote

Free online WYSIWYG tool, escapes CSS "quote" and "content" quotes, newline, backslash. Recursive application, standard compliant.

Try it yourself in editable input (should work with Enter, safer with Shift+Enter):

#foo::before {
  content: multi
line, \backslashes\, 'single quotes', "double quotes", HTML ;
  color: blue
}
#foo::after {
  content:  non breaking spaces between these words so it falls on the next line
#sample { content: double escape };
  color: green;
}

Add with CSSString, HTMLString (adds newline in Chromium).

Escaped:

As applied to <pre id="foo">foo</pre>:

foo

You may notice just a few characters escaped - double quotes, backslash and newline. That's all we need by standard:

Strings can either be written with double quotes or with single quotes. Double quotes cannot occur inside double quotes, unless escaped (e.g., as '\"' or as '\22'). Analogously for single quotes (e.g., "\'" or "\27").

"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''

A string cannot directly contain a newline. To include a newline in a string, use an escape representing the line feed character in ISO-10646 (U+000A), such as "\A" or "\00000a". This character represents the generic notion of "newline" in CSS. See the 'content' property for an example. It is possible to break strings over several lines, for aesthetic or other reasons, but in such a case the newline itself has to be escaped with a backslash (\). For instance, the following two selectors are exactly the same:

a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}

— 4.3.7 Strings, Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

Space after Unicode code point is mandatory:

To escape a character as code point means to create a string of "\" (U+005C), followed by the Unicode code point as the smallest possible number of hexadecimal digits in the range 0-9 a-f (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in base 16, followed by a single SPACE (U+0020).

— 2.1. Common Serializing Idioms, CSS Object Model

Graphical representation:

— <string-token>, CSS Syntax Module Level 3

— escape, CSS Syntax Module Level 3

Parsing rules:

4.3.5. Consume a string token

4.3.7. Consume an escaped code point

Implementation: