CSS content Property

Example

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

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

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.
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:

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

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

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)
none	Sets the content, if specified, to nothing
counter	Sets the content as a counter
attr(attribute)	Sets the content as one of the selector's attribute
string	Sets the content to the text you specify
open-quote	Sets the content to be an opening quote
close-quote	Sets the content to be a closing quote
no-open-quote	Removes the opening quote from the content, if specified
no-close-quote	Removes the closing quote from the content, if specified
url(url)	Sets the content to be some kind of media (an image, a sound, a video, etc.)
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

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 (&bull;):

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 */
}