Showing XFN relations
In the last post I explained what XFN is.
Since then I was thinking there should be more use of this, there should be a way to show this relations on every link, and I figure out a way.
Well I know maybe I'm not the first one to think of that but any way here is a technique to show XFN relations:
The technique:
Let's see the example I stated in the last post:
<a href="http://www.molly.com/" rel=" muse colleague acquaintance">Molly</a>
By adding some simple CSS rules we could show the relations after every link when hovered.
#content a:hover:after { content: attr(rel); }
We could also add some style to it to highlight it.
#content a:hover:after {
content: attr(rel);
color: #36C;
border-top: 1px dotted #36C;
}
hover here Molly and see more examples.
Take care
Avoid adding any thing beside attr(rel); in the content property, because adding it will effect all the links if you add brackets for example content:"( "attr(rel)" )"; it will have effect on all the links even the links without rel attribute will show empty brackets after it.
Add space before the first value of rel like this rel=" muse colleague acquaintance" to avoid letting the values appear sticking to the link.
Bugs
- Some times it crashes Safari, I think when expanding the values require adding a new line.
- It is not supported by IE, but that actually not a bug it will not show the values and that's all.
Any body experience any bugs please post it here.
August 17, 2005, 7:07 PM | CSS , Experiments , Web standards , XHTML