CSS property: content

Description

Dictates what is rendered inside the element or pseudo-element.

It takes a comma separated list of URIs followed by a space separated list of tokens. If there are multiple URIs provided, then each is tried in turn until a value which is both available and supported is found. The last value is used as a fallback if the others fail.

Syntax

content: [ <uri> ',' ]* [ normal | none | inhibit | <content-list> ];

Values

normal (by default)

For an element, this computes to contents.

For ::alternate, if the superior parent uses the footnote, endnote, or section-note counter in its content property then the computed value of content is contents, otherwise it computes to inhibit.

For ::before, ::after, and ::line-marker this computes to inhibit.

For ::marker, if the superior parent's superior parent uses footnote in its content property then normal computes to the computed value of the list-style-image property if the list-style-image is not none, otherwise counter(footnote, <list-style-type>) "suffix" where <list-style-type> is the computed value of the list-style-type property if that property is not none and suffix is the suffix appropriate for that list style type, otherwise inhibit.

For ::marker, if the superior parent's superior parent uses endnote in its content property then normal computes to the computed value of the list-style-image property if the list-style-image is not none, otherwise counter(endnote, <list-style-type>) "suffix" where <list-style-type> is the computed value of the list-style-type property if that property is not none and suffix is the suffix appropriate for that list style type, otherwise inhibit.

For ::marker, if the superior parent's superior parent uses section-note in its content property then normal computes to the computed value of the list-style-image property if the list-style-image is not none, otherwise counter(section-note, <list-style-type>) "suffix" where <list-style-type> is the computed value of the list-style-type property if that property is not none and suffix is the suffix appropriate for that list style type, otherwise inhibit.

Otherwise, for ::marker, if the computed value of display for the superior parent is list-item then normal computes to the computed value of the list-style-image property if the list-style-image is not none, otherwise counter(list-item, <list-style-type>) "suffix" where <list-style-type> is the computed value of the list-style-type property if that property is not none and suffix is the suffix appropriate for that list style type, otherwise inhibit.

For the @footnote area, it computes to pending(footnote).

For margin areas, it computes to none.

<uri>

If the value is the only value in the list, as the two URIs in the example below are:

h1 { content: url(header/mng), url(header/png); }

...then if the URI is available and the format is supported, then the element or pseudo-element becomes a replaced element, otherwise, the next item in the comma separated list is used, if any. In the example above, if header/mng wasn't in a supported format, then header/png would have been used instead. If no alternatives exist, then none is used as a final fallback, so in the example above, if header/png wasn't available either, then the <h1> element would be empty.

Thus to make an element fallback on its contents, you have to explicitly give contents as a fallback:

content: url(1), url(2), url(3), contents;

If the URI is not the only value in the list, as the second URI in the following example:

h1 { content: url(welcome), "Welcome to: " url(logo); }

...then if the file is available and the format is supported, then an anonymous replaced inline element is inserted, otherwise the image is ignored (as if it hadn't been given at all).

When a URI is used as replaced content, it affects the generation of ::before and ::after pseudo-elements

none

On elements, this inhibits the children of the element from being rendered as children of this element, as if the element was empty.

On pseudo-elements it causes the pseudo-element to have no content.

In neither case does it prevent any pseudo-elements which have this element or pseudo-element as a superior from being generated.

inhibit

On elements, this inhibits the children of the element from being rendered as children of this element, as if the element was empty.

On pseudo-elements, this inhibits the creation of the pseudo-element, as if display computed to none.

In both cases, this further inhibits the creation of any pseudo-elements which have this pseudo-element as a superior.

<content-list>

[ pending(<identifier>) | <string> | contents | footnote | endnote | section-note | list-item | <counters> | <strings> | open-quote | close-quote | no-open-quote | no-close-quote | <glyph> | <uri> | <date> | document-url | <target> ]+

One or more of the following values, concatenated.

pending(<identifier>)

This causes all elements and pseudo-elements whose move-to property computes to the specified identifier to be inserted as children of the current element (or pseudo-element). Note: This doesn't change the DOM, and elements and pseudo-elements that have been moved inherit from their position in the DOM, not from their new position.

This must be the case, because otherwise it would be impossible to determine the value of move-to. Unfortunately, this can cause some unfortunate discontinuities, such as adjacent footnotes using different fonts because they were moved from elements with different fonts. It is therefore important that moved content be styled with the new location in mind.

Note that only elements and pseudo-element that have not yet been reinserted into content are moved. For example:

moved { move-to: insert; }
insert { content: pending(insert); }
<root>
    <moved> A </moved>
    1
    <insert/>
    2
    <moved> B </moved>
    3
    <insert/>
</root>

...would result in "1 A 2 3 B".

If used on an element or pseudo-element (particularly ::alternate) which has a move-to property with a computed value other than here, the content pending at the pseudo-element's superior's position is inserted, not the content pending at the element or pseudo-element's insertion point. Similarly if used on a child of an element that has been moved: the content property is evaluated before the element is inserted in its new position. This should prevent an element ever being inserted into itself or other such existential conundrums.

Counters on content that is moved in this way are evaluated at the point of origin, not the insertion point.

The identifiers here and normal are valid, in that they do not cause a parse error and are not ignored, but they are useless as the move-to property cannot ever be set to an identifier with either of those values.

Need to define exactly how this interacts with position:fixed. Does position:fixed cause multiple rendering objects to be created, one per page? If so where does move-to on a position:fixed element move from?

"" (the empty string)

If the element or pseudo-element's display property computes to anything but inline then the element or pseude-element contains an empty anonymous inline box, otherwise the element contains an empty string.

(This is a formal way of saying that an empty string is different from none in that it forces the creation of a line box, even if the line box would be empty.)

<string>

The element or pseudo-element contains the specified string. Occurrences of line-feed or space characters in the string are handled according to the properties given in the Text module.

contents

The element's descendents. Since this can only be used once per element (you can't duplicate the children if, e.g., one is a plugin or form control)

Note that while it is useless to include contents twice in a single content property, that is not a parse error. The second occurrence simply has no effect, as it has already been used. It is also not a parse error to use it on a marker pseudo-element, it is only during the rendering stage that it gets treated like none.

footnote

Shorthand for counter(footnote, normal). This is intended to be used on the in-flow part of a footnote.

endnote

Shorthand for counter(endnote, normal). This is intended to be used on the in-flow part of a endnote.

section-note

Shorthand for counter(section-note, normal). This is intended to be used on the in-flow part of a section-note.

list-item

Shorthand for counter(list-item, normal). Note that this is not equivalent to normal when set on a ::marker pseudo-element that has a superior with display set to list-item, as it ignores the list-style properties.

<counters>

Counters may be specified with two different functions: counter() or counters(). The former has two forms: counter(name) or counter(name, style). The generated text is the value of the named counter at this point in the formatting structure; it is formatted in the indicated style (the default is specified using @counter rules). The latter function 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 at this point in the formatting structure, separated by the specified string. The counters are rendered in the indicated style (the default is again specified using @counter rules). See the section on automatic counters and numbering for more information.

<strings>

Set strings may be specified with the string(name) expression. The generated text is the value of the named string at this point in the formatting structure. See the section on named strings for more information.

open-quote

These values are replaced by the appropriate string from the quotes property.

close-quote

These values are replaced by the appropriate string from the quotes property.

no-open-quote

Inserts nothing (as in none), but increments (decrements) the level of nesting for quotes.

no-close-quote

Inserts nothing (as in none), but increments (decrements) the level of nesting for quotes.

<glyph>

Inserts the specified symbol.

<date>

The date(format) expression returns the current date and/or time, formatted according to the specified formatting string. Formatting strings will be defined in a future version of this draft and may be based on POSIX date formatting strings.

document-url

The URI of the current document. For local files, this may simply be the local file name.

<target>

Using the target expressions, authors can write cross-references.

Versions

Examples

h1:after {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background-color: red;
}