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) ")";
}

Run it...   »

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.