English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS content property and ::before and ::afterPseudo-elementCombined usage to generate content within elements.
The following table provides usage instructions and version history of this attribute, as well as its syntax in JavaScript scripts.
| Default value: | normal |
|---|---|
| Applies to: | ::before and ::after Pseudo-element |
| Inheritance: | None |
| Animated by: | No.See also Animation properties. |
| Version: | CSS 2,3 |
| JavaScript syntax: | object.style.content="counter" |
The syntax of this attribute is as follows:
content: normal | none | counter | string | url(url) | attr(attribute) | open-quote | close-quote | no-open-quote | no-close-quote | initial | inherit
The following example demonstrates how to use the content attribute.
h1::before {
content: "Chapter: ";
display: inline;
}Test to see‹/›Note:display CSS attribute controls whether the content generated by the content attribute is placed in a block box or an inline box.
The following table describes the value of this attribute.
| Value | Description |
|---|---|
| normal | for :before and :after Pseudo-element,It does not calculate any value. This is the default value. |
| none | referred to asPseudo-elementNo production. |
| counter | This value will set content to the counter. For more information, please seecounter-resetandcounter-incrementAttribute. |
| string | Insert the specified string (text content). |
| url(url) | The value url() specifies external resources (such as images). If the resource or image cannot be displayed, it will be ignored or some placeholder will be displayed. |
| attr(attribute) | This function inserts the specified attribute value before or after the selected element. If the selected element's subject does not have the specified attribute, an empty string will be inserted. Note: The attribute name should not be quoted. |
| open-quote | Insert the left quotation mark. These values will be replaced by the appropriate strings in the quotes attribute. |
| close-quote | Insert the right quotation mark. These values will be replaced by the appropriate strings in the quotes attribute. |
| no-open-quote | Do not display the opening quotation mark, but increase (decrease) the nesting level of the quotation marks. |
| no-close-quote | Do not display the right quotation mark, but increase (decrease) the nesting level of the quotation marks. |
| initial | Set this attribute to its default value. |
| inherit | If specified, the associated element uses the content attribute value of its parent element. |
Browser compatibility of the content attribute, the numbers in the following table represent the minimum version number of the browsers that support this attribute; all mainstream browsers support this attribute.
|
Warning: Internet Explorer 7and earlier versions do not support the content attribute. IE8Not supported inSupports only when a valid value is specified.
Please refer to the following tutorials:CSS Pseudo-elements.
Related Attributes:counter-reset,counter-increment.