Scribd
Upload
31 views

CSS Content Property

The content property inserts generated content before or after an element. It is used with the :before and :after pseudo-elements. Content can be strings, URLs, counters, attributes, or quotes. By default, content is set to "normal" which displays nothing. The content property is not inherited and is not animatable. It has good browser support going back to the earliest versions of most browsers.

Uploaded by

Mazen SEGNI
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

CSS Content Property

The content property inserts generated content before or after an element. It is used with the :before and :after pseudo-elements. Content can be strings, URLs, counters, attributes, or quotes. By default, content is set to "normal" which displays nothing. The content property is not inherited and is not animatable. It has good browser support going back to the earliest versions of most browsers.

Uploaded by

Mazen SEGNI
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like