content

Definition

The CSS content property is used to insert generated content before or after an element. The content can be any valid string, image, or character. It is often used with the :before and :after pseudo-elements.

Examples

In this example, the :before pseudo-element of the .element class has content: "Before"; set, which means that the text "Before" will be inserted before the element:

.element::before {
  content: "Before";
}

In this example, the :after pseudo-element of the .element class has content: url(image.png); set, which means that the image "image.png" will be inserted after the element:

.element::after {
  content: url(image.png);
}

In this example, the :before pseudo-element of the .element class has content: "\2713"; set, which means that the character represented by the Unicode code point 2713 (checkmark symbol) will be inserted before the element:

.element::before {
  content: "\\2713";
}

Values

Best Practices

• Use the content property with the :before and :after pseudo-elements to insert generated content.
• Use the content property in combination with the :before and :after pseudo-elements to create custom bullet points, markers, or other decorative elements.
• Use the content property in combination with the :before and :after pseudo-elements to add additional information to an element, such as a count or a symbol.

Browser Compatibility