CSS content property

Definition and Usage

The content attribute is used in conjunction with the :before and :after pseudo-elements to insert generated content.

Description

This property is used to define the generated content placed before or after an element. By default, this is often inline content, but the type of box created by the content can be controlled by the display property.

See also:

CSS Reference Manual:CSS :before pseudo-element

CSS Reference Manual:CSS :after pseudo-element

HTML DOM Reference Manual:content attribute

Example

The following example inserts the URL in parentheses after each link:

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

Try it yourself

CSS Syntax

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

Attribute Value

Value Description
none 　
normal 　
content specifications 　
inherit Specifies that the content attribute value should be inherited from the parent element.

Technical Details

Default Value: normal
Inheritance: no
Version: CSS2
JavaScript Syntax: object.style.content="url(beep.wav)"

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 4.0