CSS Content

CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page. This is what it looks like:

.email-address:before {
   content: "Email address: ";
}

With this CSS in place, we could have this HTML:

<ul>
   <li class="email-address">chriscoyier@gmail.com</li>
</ul>

And the output would be like:
• Email address: chriscoyier@gmail.com
Maybe that example doesn't get you drooling, but pseduo element content can be quite useful and do cool things. Let's go through some ideas and considerations.

Hey! That's content not design!

The first concern might be that of a separation-between-content-and-design purist. You are literally adding text content to the page with CSS content, and that breaks that barrier. The spec is done and the idea implemented, but that doesn't mean it's not worth discussing. If you have an opinion about CSS content and its use, please share in the comments.
I think it's awesome and perfectly suited for CSS. Consider the example above where we preface all elements with a class of email-address with the text "Email address: ". That is a design decision, where for the clarity of content, it was decided that having that text before email addresses made the content more clear. Perhaps in a redesign of the site, there was less room where those email addresses are being displayed and it was decided that instead of prefacing them with text, a small icon would be used instead. This fits with the idea of CSS, in that the HTML content doesn't need to change at all, this change could be solely accomplished with CSS.
I'm going to publish an article tomorrow with this kind of idea.

Using Special Characters

If you need to use a special character in the CSS content, it's kinda weird. How I do it is I figure out what the ASCII number is for the symbol.  is handy. So on that chart the copyright © symbol is © - so the ASCII number is 169. Then I drop that number in the Entity Conversion Calculator which will convert it into what you need for CSS.

Not pretty, but it works.

Here's some random useful ones:
\2018 - Left Single Smart Quote
\2019 - Right Single Smart Quote
\00A9 - Copyright
\2713 - Checkmark
\2192 - Right arrow
\2190 - Left arrow

Example Trick: Checkmark visited links

Mark your visited links with checkmarks:

#main-content a:visited:before {
   content:  "\2713 ";
}

Using Attributes

You are able to insert attributes of the elements you are targeting as content. For example, an anchor link might have a title attribute:

<a title="A web design community." href="http://css-tricks.com">CSS-Tricks</a>

You can access that title attribute from the content property like:

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

Any attribute can be targeted as such, in the format attr(name-of-attribute). If you'd like to insert something into the HTML to use for a CSS content purpose (but nothing else), you could use the new data- attribute prefix in HTML5.

Example Trick: CSS3 tooltips

Tooltips for links based on the title attribute:

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0; 
  top: 100%;
  white-space: nowrap; 
  z-index: 20px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;  
  border-radius: 5px;  
  -moz-box-shadow: 0px 0px 4px #222;  
  -webkit-box-shadow: 0px 0px 4px #222;  
  box-shadow: 0px 0px 4px #222;  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);  
}

Now this example uses the title attribute, and other examples like this that you find around the web also use the title attribute. It's probably the correct one to use. However, do note that browsers have their own tooltip popups that they do. When that comes up, it will cover this, and look weird. I tried to take a screenshot of the issue but there it wasn't letting me for some reason. There is no way to suppress this, other than just not using the title attribute. HTML5 data- attributes, again, could be useful here.