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.