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: " }";
}
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;
}
Using the uri data-type the webplatform favicon is appended to all elements with the webplatform class.
.webplatform:before {
content: url('/docs/favicon.ico');
}
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) ". ";
}
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;
}
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
content
Multi-Column
content
Other articles
External resources
- CSS-Tricks: CSS Content [1]
Attributions
Microsoft Developer Network: [Windows Internet Explorer API reference Article]