La propiedad CSS content: «»; viene siendo utilizada para entregar más estilos donde no necesitas extra marcado con HTML. Su soporte es amplio (IE8+ y demases browsers modernos). Su uso está atado a los pseudo-elementos :after y :before y permite generar contenido (de tipo texto) en dicho pseudo-elemento. Un ejemplo básico:

div {<br />
  color: blue;<br />
}<br />
  div:after {<br />
  	content: "Link: "<br />
  	color: gray;<br />
  }

Resulta muy útil ya que disponemos de nuevos elementos (vale aclarar que no pertenecen al DOM) los que podemos dar estilos anexos al elemento mismo que estamos manipulando con CSS. Pero este no es el caso de este artículo… (se me ocurre hacer un videocast sobre eso).

Dentro de lo que permite agragarse a través de content está attr(), vale decir, cualquier atributo del elemento que estás manipulando con CSS. Usualmente estás acostumbrado a hacerlo con [JavaScript][1] pero en este caso sólo con estilos podemos crear pseudo-elementos y darle contenido nuevo y/o existente. Resulta muy útil si queremos, por ejemplo, hacer un tooltip sólo con CSS rescatando el texto dentro de title:

<a title="Título de este mágico tooltip sólo con CSS3" href="#">tooltip sólo con CSS3</a>
a[title]:hover:after { /* Este es el cuadrado del tooltip que contiene el texto */<br />
  content: attr(title);<br />
  color: #333;<br />
  position: absolute;<br />
  left: 50%; <br />
  top: -150%;<br />
  white-space: nowrap; <br />
  z-index: 10;<br />
  border-radius: 6px;<br />
  background-color: rgba(0,0,0,.7);<br />
  color: white;<br />
  font-size: .7em;<br />
  padding: .1em .5em;<br />
  text-shadow: black 1px 1px 0;<br />
}<br />
a[title]:hover:before { /* Este es el triangulo del tooltip */<br />
  position: absolute;<br />
  top: -4px;<br />
  left: 60%;<br />
  content: "";<br />
  width: 0;<br />
  height: 0;<br />
  border-style: solid;<br />
  border-width: 7px 7px 0 7px;<br />
  border-color: rgba(0,0,0,.7) transparent transparent transparent;<br />
}

Ya en un [muy antiguo artículo proponía su uso en hojas de estilos para impresión media=“print”][2] donde para [mejor accesibilidad][3] a todos los links se entregara como información impresa la URL al que corresponde ese link luego del texto del enlace mismo.

@media print {<br />
  a:after {<br />
    content: " ( http://www.csslab.cl " attr(href) " ) ";<br />
    font-size: small;<br />
  }<br />
}

[1]: http://www.csslab.cl/categoria/javascript/ “Enlace en CSSLab a “Javascript”” [2]: http://www.csslab.cl/2005/11/15/mediaprint/ “Enlace en CSSLab a “media=”print” (actualizado)”” [3]: http://www.csslab.cl/categoria/accesibilidad/ “Enlace en CSSLab a “Accesibilidad””