CSS content Property

CSS Reference Complete CSS Reference

Example

The following example inserts the URL in parenthesis after each link:

a:after
{
content: " (" attr(href) ")";
}

Try it yourself »

Definition and Usage

The content property is used with the :before and :after pseudo-elements, to insert generated content.

Default value: normal
Inherited: no
Version: CSS2
JavaScript syntax: object.style.content="url(beep.wav)"


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The content property is supported in all major browsers.

Note: Internet Explorer 8 (and higher) supports the content property if a !DOCTYPE is specified.


Content Property Values

Value Description Example
none Sets the content, if specified, to nothing Try it »
normal Sets the content, if specified, to normal, which default is "none" (which is nothing) Try it »
counter Sets the content as a counter Try it »
attr(attribute) Sets the content as one of the selector's attribute Try it »
string Sets the content to the text you specify Try it »
open-quote Sets the content to be an opening quote Try it »
close-quote Sets the content to be a closing quote Try it »
no-open-quote Removes the opening quote from then content, if specified Try it »
no-close-quote Removes the closing quote from then content, if specified Try it »
url(url) Sets the content to be some kind of media (an image, a sound, a video, etc.) Try it »
inherit Specifies that the value of the content property should be inherited from the parent element


Related Pages

CSS reference: :before pseudo element

CSS reference: :after pseudo element


CSS Reference Complete CSS Reference