This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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('http://docs.webplatform.org/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

See also

Related articles

Generated and Replaced Content

Multi-Column

Other articles

External resources

  • CSS-Tricks: CSS Content [1]

Attributions