The 'content' property

'content'

Value:	[ | | | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Initial:	empty string
Applies to:	:before and :after pseudo-elements
Inherited:	no
Percentages:	N/A
Media:	all

This property is used with the :before and :after pseudo-elements to generate content in a document. Values have the following meanings:

">

Text content (see the section on strings).

">

The value is a URI that designates an external resource. If a user agent cannot support the resource because of the media types it supports, it must ignore the resource. Note. CSS2 offers no mechanism to change the size of the embedded object, or to provide a textual description, like the "alt" or "longdesc" attributes do for images in HTML. This may change in future levels of CSS.

">

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 ('decimal' by default). The latter function also has two forms: 'counter(name, string)' or 'counter(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 ('decimal' by default). See the section on automatic counters and numbering for more information.

open-quote and close-quote

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

no-open-quote and no-close-quote

Inserts nothing (the empty string), but increments (decrements) the level of nesting for quotes.

attr(X)

This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector doesn't have an attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language. Note. In CSS2, it is not possible to refer to attribute values for other elements of the selector.

The 'display' property controls whether the content is placed in a block, inline, or marker box.

Authors should put 'content' declarations in @media rules when the content is media-sensitive. For instance, literal text may be used for any media group, but images only apply to the visual + bitmap media groups, and sound files only apply to the aural media group.

Example(s):

The following rule causes a sound file to be played at the end of a quotation (see the section on aural style sheets for additional mechanisms):

@media aural {

  BLOCKQUOTE:after { content: url("beautiful-music.wav") }

  }

Example(s):

The next rule inserts the text of the HTML "alt" attribute before the image. If the image is not displayed, the reader will still see the "alt" text.

IMG:before { content: attr(alt) }

Authors may include newlines in the generated content by writing the "\A" escape sequence in one of the strings after the 'content' property. This inserts a forced line break, similar to the BR element in HTML. See "Strings" and "Characters and case" for more information on the "\A" escape sequence.

Example(s):

H1:before {

   display: block;

   text-align: center;

   content: "chapter\A hoofdstuk\A chapitre"

}

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

Note. In future levels of CSS, the 'content' property may accept additional values, allowing it to vary the style of pieces of the generated content, but in CSS2, all the content of the :before or :after pseudo-element has the same style.

12.3 Interaction of :before and :after with 'compact' and 'run-in' elements

The following cases can occur:

1. A 'run-in' or 'compact' element has a :before pseudo-element of type 'inline': the pseudo-element is taken into account when the size of the element's box is computed (for 'compact') and is rendered inside the same block box as the element.
2. A 'run-in' or 'compact' element has an :after pseudo-element of type 'inline': The rules of the previous point apply.
3. A 'run-in' or 'compact' element has a :before pseudo-element of type 'block': the pseudo-element is formatted as a block above the element, and does not take part in the computation of the element's size (for 'compact').
4. A 'run-in' or 'compact' element has an :after pseudo-element of type 'block': both the element and its :after pseudo-element are formatted as block boxes. The element is not formatted as an inline box in its own :after pseudo-element.
5. The element following a 'run-in' or 'compact' element has a :before of type 'block': the decision how to format the 'run-in'/'compact' element is made with respect to the block box resulting from the :before pseudo-element.
6. The element following a 'run-in' or 'compact' element has an :before of type 'inline': the decision how to format the 'run-in'/'compact' element depends on the 'display' value of the element to which the :before is attached.

Example(s):

Here is an example of a 'run-in' header with an :after pseudo-element, followed by a paragraph with a :before pseudo-element. All pseudo-elements are inline (the default) in this example. When the style sheet:

H3 { display: run-in }

H3:after { content: ": " }

P:before { content: "... " }

is applied to this source document:

Centaurs

have hoofs

have a tail

The visual formatting will resemble:

Centaurs: ... have hoofs

... have a tail

12.4 Quotation marks

In CSS2, authors may specify, in a style-sensitive and context-dependent manner, how user agents should render quotation marks. The 'quotes' property specifies pairs of quotation marks for each level of embedded quotation. The 'content' property gives access to those quotation marks and causes them to be inserted before and after a quotation.

12.4.1 Specifying quotes with the 'quotes' property

'quotes'

Value:	[ ]+ | none | inherit
Initial:	depends on user agent
Applies to:	all elements
Inherited:	yes
Percentages:	N/A
Media:	visual

This property specifies quotation marks for any number of embedded quotations. Values have the following meanings:

none

The 'open-quote' and 'close-quote' values of the 'content' property produce no quotations marks.

["> ">]+

Values for the 'open-quote' and 'close-quote' values of the 'content' property are taken from this list of pairs of quotation marks (opening and closing). The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc. The user agent must apply the appropriate pair of quotation marks according to the level of embedding.

Example(s):

For example, applying the following style sheet:

/* Specify pairs of quotes for two levels in two languages */

Q:lang(en) { quotes: '"' '"' "'" "'" }

Q:lang(no) { quotes: "«" "»" "<" ">" }



/* Insert quotes before and after Q element content */

Q:before { content: open-quote }

Q:after  { content: close-quote }

to the following HTML fragment:

 

 

 

 

   
Quote me!

 

would allow a user agent to produce:

"Quote me!"

while this HTML fragment:

 

 

 

 

   
Trøndere gråter når Vinsjan på kaia blir deklamert.

 

would produce:

«Trøndere gråter når  blir deklamert.»