The CSS content property has the insertion of generated content as its sole task. This property works with strings, either by converting them directly or by replacing them when passed by a CSS function (such as attr()). Also, this property is space-sensitive, so 'a b' and 'a b' produce different results in the sense that all strings are treated literally as they're inserted.
A simple use is the insertion of a string before the actual content of an element:
p:before {
content: 'Test';
}
This is a basic, atomic use. We can make things a little bit more complex by using CSS functions, like so:
p:before {
content: '[class] ' attr(class);
}
In this case we'll have also the value of the class attribute inserted after the first string. Note that this property doesn't use special characters to concatenate strings among its values, but only the pair of quotes used for delimiting strings. An important case to keep in mind is the insertion of special characters. These kind of characters must be escaped using the Unicode notation, that is, \ followed by the character's code. For example, the following code inserts a commercial at before the content of an element:
a.twitter:before {
content: '\0040 ';
}
0040 is the Unicode code for '@'. You can find a great variety of such codes at www.alanwood.net/unicode/.