/* Mark up all links with a "rel" or "rev" attribute set.
by Dan Rasmussen <http://danrasmussen.org>
Created September 8, 2008, with linguistic updates on September 27, 2012.

Draw attention to links with "rel" or "rev" attributes set, by printing the attribute value after the element that uses it. Sometimes this will indicate microformats (see http://microformats.org/), tags, XFN friends, rel="me", nofollow, content license used, etc.

Like this? See my style for displaying access keys (which this one is based on)
http://userstyles.org/styles/10407
or see all the styles I've made:
http://userstyles.org/users/14583
Suggestions for improvements:
http://danrasmussen.org/contact

Potential enhancements:
Use these icons, with or without highlighting text: http://microformats.org/wiki/icons
Highlight "standard" rel values (http://microformats.org/wiki/existing-rel-values) in one color. Use different colors for "draft" or "experimental" values. Use another color for values that aren't in the list at all. IE, to help catch typos.

Licensed under the Creative Commons Attribution 3.0 license:
http://creativecommons.org/licenses/by/3.0/
*/

a[rel]:after,
a[rev]:after
{
  margin-left: 0.3em;
  background-color: black;
  color: white;
  font-size: 125%;
  padding: .125em .125em;
}

a[rel]:after {
  content: "[" attr(rel) "]";
}
a[rev]:after {
  content: "[" attr(rev) "]";
}