CSS Pseudo Trick

By stewart • January 24, 2008

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>

Categories: Technology
Tags:

Chris Coyier Jan 24th, 2008 at 3:00 pm

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 Jan 25th, 2008 at 10:17 am

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.

Stewart Schatz