29/06/2016 CSS 

Content Property

w3schools.com
THE WORLD'S LARGEST WEB DEVELOPER SITE

☰   

CSS content Property

« Previous Complete CSS Reference Next »

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

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

Try it Yourself »

More "Try it Yourself" examples below.

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

http://www.w3schools.com/cssref/pr_gen_content.asp 1/3
29/06/2016 CSS Content Property

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, Try it »

which default is "none" (which is nothing)

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­ Removes the opening quote from the content, if specified Try it »

quote

no­close­ Removes the closing quote from the content, if specified Try it »

quote

url(url) Sets the content to be some kind of media (an image, a Try it »

sound, a video, etc.)

initial Sets this property to its default value. Read about initial
http://www.w3schools.com/cssref/pr_gen_content.asp 2/3
29/06/2016 CSS Content Property

inherit Inherits this property from its parent element. Read about
inherit

More Examples

Example
How to add bullet colors for <ul> or <ol> by removing their default bullets and adding
a HTML entity that looks like bullets (&bull;):

ul { 
    list‐style: none; /* Remove list bullets */ 
    padding: 0; 
    margin: 0; 
} 

li {  
    padding‐left: 16px;  
} 

li:before { 
    content: "•"; /* Insert content that looks like bullets */ 
    padding‐right: 8px; 
    color: blue; /* Or a color you prefer */ 
}

Try it Yourself »

Related Pages
CSS reference: :before pseudo element

CSS reference: :after pseudo element

« Previous Complete CSS Reference Next »

http://www.w3schools.com/cssref/pr_gen_content.asp 3/3