content property

Specifies generated content to insert before or after an element.

Syntax

content: [ string | counter ]+

Property values

A variable of type String that specifies or receives a space-delimited list, including one or more of the following values.

string

Text content, in either double quotation marks (") or single quotation marks (').

counter

Possible values include the following:

Value	Meaning
sCounter	A counter identifier, optionally followed by listStyle.
listStyle	Optional. Any of the range of values from the list-style-type property.

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value

Standards information

CSS 2.1, Section 12.2

Remarks

The content attribute is used in conjunction with ::before and ::after pseudo-classes to generate content in a document.

Strings can written with either double quotation marks (") or with single quotation marks ('). Double quotation marks cannot occur inside other double quotation marks, unless they are preceded by a backslash (\) escape character. For example, the string "\"" is interpreted as containing one double quotation character.

It is possible to break strings over several lines, for esthetic or other reasons, by use of the backslash as a continuation character; however, the newline character itself is ignored. Authors may include line breaks in the generated content by writing the \A escape sequence in any of the strings after the content property. The generated line break is displayed in accordance with the value of the white-space attribute.

The backslash is also used to generate escape characters that cannot be represented in the current character encoding. In this case, the backslash is followed by at most six hexadecimal digits (from the range 0–9 and A–F) to indicate the Unicode character with that number.

This property requires Windows Internet Explorer to be in IE8 Standards mode rendering.

Examples

The following example generates braces before and after all the hn elements on a page.

JavaScript


<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style type="text/css">
  h1:before {
    content: "{ ";
  }

  h1:after {
	  content: " }";
  }
</style>