Jørgen’s fancy underlines

Jørgen Winsnes is one of the brightest designes I know. He recently asked me to make him some fancy hover effects that he wanted to make a standard on EVERY project (so he said). Specifically, he wanted the underline on a link to grow from left to right and then disappear to the right when hovering.

I did some research, trying to make a solution without JavaScript for the simplicity of just including a few lines of CSS. However, it turned out that animating pseudo elements with transition in CSS3 is only supported in Firefox. Not even Chrome.

So I ended up writing a jQuery plugin instead. And to be honest, it was incredibly much less work than fiddling with the pseudo classes.

Demo source