The first thing we need to do is turn off text-decoration, and set the link’s positionto relative. For simplicitiy’s sake, we’ll also make sure the link doesn’t change color on hover. Here we’re applying the effect to all link elements inside h2s:

I recently added a simple visual effect to this blog that I quickly fell in love with: when you hover blog headers, the link’s underline is revealed by animating it out from the center. You can try it in the banner above.

Creating this effect is surprisingly easy, doesn’t require any additional DOM elements to be added through HTML, and falls back nicely for browsers that don’t support CSS animations (it will just show up as a regular underline).