CSS Pseudo Trick – Stewart Schatz

CSS Pseudo Trick

I found the following little CSS (cascading style sheets) trick by Chris Coyier kinda cool:

Sorry, this is not supported by IE. However, if it was, here is what the link looks like when you hover over it:

Here is the CSS behind it:

<style type="text/css">
     a[href^="mailto"]:hover:after {
          content: " > " attr(title);
     }
</style>

Similar Posts:

None Found

This entry was written by stewart, posted on January 24, 2008 at 9:00 am, and filed under Technology.

2 Comments

Chris Coyier

Posted January 24, 2008 at 3:00 pm | Permalink

Hey Stewart –

Thanks for the link =)

Nice implementation of it. One big limitation of it (other than it not working in IE) is that you really need that space after the link, otherwise it can cause some serious text re-flow when that content jumps in there. That’s why I’m a little scared to do it on my own blog, just because there are so many archive posts that might have email links in them I have no easy way to make sure they all look/work good with the change.
stewart

Posted January 25, 2008 at 10:17 am | Permalink

Thanks for taking the time to comment on my post and for the hint that it doesn’t work in IE. Sometimes, I get ahead of myself and don’t check all browsers.

Anyway, thanks again.

Post a Comment