CSS content Property


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
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: You can't give an element a pseudo-class by using JavaScript,
but there are other ways to get the same result: Try it


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
content 1.0 8.0 1.0 1.0 4.0

Note: IE8 only supports the content property if a !DOCTYPE is specified.


CSS Syntax

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

Property Values

Value Description Example
normal Default value. Sets the content, if specified, to normal, which default is "none" (which is nothing) Try it »
none Sets the content, if specified, to 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 the content, if specified Try it »
no-close-quote Removes the closing quote from the 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 »
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit


Related Pages

CSS reference: :before pseudo element

CSS reference: :after pseudo element



Color Picker

colorpicker