content property

Specifies generated content to insert before or after an element.

CSS 2.1, Section 12.2Internet Explorer 8

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:

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Value

Standards information

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.


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

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

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style
Reference
counter-increment
counter-reset

 

 

Show:
© 2014 Microsoft. All rights reserved.