Pseudo elements and attributes

A pseudo element may get it's content value from the element's attribute:

HTML

<a href="bar" class="foo">Hello</a>

CSS

.foo:after {
      content: attr(href)   /* this will return 'bar' */
}

This functionality can come handy in many situations, especially with the new data-name attribute available.

Example:
If you use a typeface for an icon. Let's say you have a 'Click me' button and you want to change that with the type-icon. The icon's character is for instance 'X'. Putting 'X' isn't really semantic, so what we do is this:

1. Create a 'data-icon' attribute on the element with the value of 'X', leaving the element semantic
2. In css, create the pseudo element, read the attribute value of 'data-icon' and switch the text with the icon (you can do this in many ways - indenting for one)

This is just one of many things. Try it out and embrace the capabilities :)