Imagine your web site — made elegant, but simple and standards compliant, yet beautiful and for less time & money than you might think.

The attr(x) function

Plenty of web sites refer to this example when describing what the attr(x) function does. In general, it justs pulls the attribute value out of an element, and returns it as a string. A string that can be used, however you please.

@media print {
a::after {
   content: attr(href);
  }
}

Sure, I'll admit - showing users what the URL of a link was, AFTER the page has been printed, can be quite useful. Like this, for example:

This is my linkhttp://www.google.com/

Although, it doesn't look all that good crammed up against the right side of a link. And what if we have "back to top" (section anchored) links throughout the page? In this case it would be useless to the user to see "#top" as the URL, to remedy this, we can do a couple things.

Make it exclude links which begin with a pound sign:

	
@media print {
  a:not([href^='#'])::after {
    content: attr(href);
  }
}

Make it enclose the href value with parenthesis

@media print {
  a:not([href^='#'])::after {
    background-color: #FFF;
    padding: 3px;
    content: "( " attr(href) " ) ";
  }
}

So our finished result should look something like this:

eBay (http://www.ebay.com)

And thats all folks. If you have suggestions, chime in.

Notes:
Internet Explorer (even version 7) doesn't support the the ::before and ::after pseudo elements.

Jun 21, 2009