CSS content Property

❮ Previous Complete CSS Reference Next ❯

Example

The following example inserts the value of the href attribute in parenthesis after each <a> element:

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

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

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

CSS Syntax

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

More Examples

Example

How to add bullet colors for <ul> or <ol> by removing their default bullets and adding an HTML entity that looks like bullets (•):

ul {
list-style: none; /* Remove HTML 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 »

CSS reference: ::before pseudo element

CSS reference: ::after pseudo element

❮ Previous Complete CSS Reference Next ❯