content

Summary

The content property is used to display content in the pseudo-elements ::before and ::after.

Overview table

Initial value: normal
Applies to: pseudo-elements :before and :after
Inherited: No
Media: visual
Computed value: On elements, always computers to normal.
Animatable: Yes
CSS Object Model Property: content

Syntax

content: attr
content: close-quote
content: counter
content: no-close-quote
content: no-open-quote
content: none
content: normal
content: open-quote
content: string
content: uri

Values

none: Pseudo element is not generated.
normal: Equivalent to “none” for :before and :after pseudo-elements, which are the only places the content property currently applies.
string: Text content, in either double quotation marks (") or 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.

Newlines can be used 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.

uri: This is the url of an external resource, such as an image. If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed.
counter: Counters may be specified with two different functions: 'counter()' or 'counters()'. 'counter()' has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style (‘decimal’ by default). 'counters()' also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string.

The counters are rendered in the indicated style (‘decimal’ by default). The name must not be 'none’, ‘inherit’ or 'initial’. Such a name causes the declaration to be ignored.

open-quote: Sets the content to be the appropriate string from the quotes property.
close-quote: Sets the content to be the appropriate string from the quotes property.
no-open-quote: If set, removes the opening quote from the content.
no-close-quote: If set, removes the closing quote from the content.
attr: Value of an attribute of the subject of the selector. If attribute is not set on the subject an empty string will be returned. It is used as a function with the element name as the argument: 'attr( element-name )'

Examples

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

h1:before {
    content: "{ ";
}
h1:after {
    content: " }";
}

View live example

Using attr( element-name ) to display text from an attribute. The following example adds a box displaying the value of the data-badge attribute for a button element.

button[data-badge] {
    /* the badge is going to be positioned absolute in the
     * button. Therefore the button needs a relative position */
    position: relative;
}

button[data-badge]:after {
    /* use the data-badge attribute as value for the pseudo element */
    content: attr( data-badge );

    /* give the badge some nice styling */
    background: tomato;
    display: block;
    border-radius: 4px;
    position: absolute;
    right: -4px;
    top: -4px;
    padding: 1px 4px;
}

View live example

Using the uri data-type the webplatform favicon is appended to all elements with the webplatform class.

.webplatform:before {
    content: url('/docs/favicon.ico');
}

View live example

Uses the counter data-type to show a automatic numbering for all h2 elements on the page. More information is available on the counter-increment property page.

h2 {
/*  increment header counter per h2 element */
    counter-increment: header;
}

h2:before {
/*  show header counter before each h2 element */
    content: counter(header) ". ";
}

View live example

Uses the open-quote and close-quote data-type to add quoting around each blockquote element on the page.

blockquote:before {
    content: open-quote;
}

blockquote:after {
    content: close-quote;
}

View live example

Notes

CSS2.1 uses a single colon, and most browsers still support this. CSS3 introduces the use of double colons to avoid confusion with pseudo-classes.

Related specifications

Generated content, automatic numbering and lists: Recommendation

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]

content

Summary

Overview table

Syntax

Values

Examples

Notes

Related specifications

See also

Related articles

Generated and Replaced Content

Multi-Column

Other articles

External resources

Attributions