content

The content property in CSS is used in conjunction with the pseudo elements ::before and ::after. It is used to literally insert content. There are four value types it can have.

String

.name::before {
  content: "Name: ";
}

Then an element like this:

<div class="name">Chris</div>

Would render like this:

Name: Chris

It could also be an empty string, which is commonly seen in things like the clearfix.

Counter

div::before {
  content: counter(my-counter);
}

Image

div::before {
  content: url(image.jpg);
}

This is literally an image on the page like <img> would be. It could also be a gradient. Note that you cannot change the dimensions of the image when inserted this way. You could also insert an image by using an empty string for the content, making it display: block in some way, sizing it, and using background-image. That way you could re-size it with background-size.

Attribute

You can use values (strings, anyway) that are taken right from attributes in the HTML.

<div data-visual-label="Widget Rating">60</div>

[data-visual-label]:before {
  content: attr(data-visual-label) ": ";
}

Browser Support

For Opera, url() only supported in version 7+.