CSS content Property
CSS content property is used with the ::before and ::after pseudo-elements, to insert generated content.
Usages
The following table outline the usages and version history of this property.
| Default value: | normal |
| Applies to: | ::before and ::after pseudo-elements |
| Inherited: | No |
| Version: | CSS2 |
Syntax
Here is a syntax for the CSS content property
content: normal | none | counter | string | url(url) | attr(attribute) | open-quote |
close-quote | no-open-quote | no-close-quote | initial | inherit;
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| normal | Default. Sets the none content, which is nothing |
| none | The pseudo-element is not generated |
| counter | Sets value to the content as a counter |
| string | Sets string content |
| url(url) | Sets the media content like an image, video, sound etc |
| attr(attribute) | The selector attribute set as a content |
| open-quote | Set the opening quotation mark as a content |
| close-quote | Set the closing quotation mark as a content |
| no-open-quote | remove the opening quotation mark from the content |
| no-close-quote | remove the closing quotation mark from the content |
| initial | Sets default value of this property |
| inherit | Inherits this property from its parent element |
Examples
The example below shows to sets content property.
p:after {
content: " (" attr(data-url) ")";
}
Browser Compatibility
- Google Chrome 1+
- Mozilla Firefox 1+
- Internet Explorer 8+
- Opera 4+
- Safari 1+
Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.