content

« CSS « CSS Reference

Summary

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.

• Initial value normal
• Applies to pseudo-elements :before and :after
• Inherited no
• Media all
• Computed value
  • on :before and :after, normal computes to none
  • on elements, always computes to normal
  • for URI values, the absolute URI
  • for attr() values, the resulting string
  • for other keywords, as specified.

Syntax

content: normal | none | 
       [ <string> | <uri> | <counter> | attr() | 
         open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

Values

none

The pseudo-element is not generated.

normal

Computes to none for the :before and :after pseudo-elements.

<string>

Text content.

<uri> url()

The value is a URI that designates an external resource (such as an image). If the resource or image can't be displayed, it is either ignored or some placeholder shows up.

<counter>

[fixme] 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 innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style ('decimal' by default). 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 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). See the section on automatic counters and numbering for more information. The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored.

attr(X)

Returns the value of the element's attribute X as a string. If there is no attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language.

open-quote | close-quote

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

no-open-quote | no-close-quote

Introduces no content, but increments (decrements) the level of nesting for quotes.

Examples

q:lang(en) { quotes: '"' '"' "'" "'" }
q:before   { content: open-quote }
q:after    { content: close-quote }

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

/* content accepts multiple values */

a:before   { content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: "; 
             font:    x-small Arial,freeSans,sans-serif;
             color:   gray;
           }

View on jsFiddle

Specifications

Specification	Status	Comment
CSS Level 2 (Revision 1)	Recommendation

Browser compatibility

See also

• :after, :before, quotes