content

The content property is used to insert generated content by utilizing the ::before and ::after pseudo-elements.

Syntax

Example:

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

normal
Default value. If specified, sets the content to normal, which default is “none”.

none
Content is set to nothing.

counter
Content is set as a counter.

attr(attribute)
Content is set as one of the selector’s attribute.

string
Content is set to a specified text.

open-quote
Content is set as an opening quote.

close-quote
Content is set as a closing quote.

no-open-quote
Opening quotes, if specified, are removed from the content.

no-close-quote
Closing quotes, if specified, are removed from the content.

url(url)
Content is set as some type of media (image, sound, video, etc.).

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Have a code example of content? Submit a codepen.io demo and we'll showcase it here ↴

to submit a demo.