Not bad. But I should say this is not some sort of invention. This technique is everywhere.

Not bad at all.

This is a good example of how CSS3 should be used. To provide additional effects to users with modern browsers, without relying on graphics, and have solid fallback (in this case just a black 1px line, for users in non-css3 supporting browsers.

Chris' solution is even cleaner and more semantic - but nicely done Josh :-)

It could be done aswell. And that could make as much sense if not more ;-)

http://jsfiddle.net/pDs4C/

It just requires an additional line border: 0;

It has the same result for me, both when showing it in Safari with the gradient, and in firefox with the fallback. :-)

http://jsfiddle.net/GaEzp/
I don't like white-to-black gradient, so I used other colors so there's not so much contrast between the two colors and also between the line and the content.

I've taken this a step farther, and made this a gradient :hover underline. add a different color for :active and it's pretty cool.
Link to JSFiddle

I just forked me some fiddles.

@joshuanhibbert Good stuff. JSFiddle may be the coolest thing eva!

I tried all of them but seems they appear different in other browsers ahem*ie*
I also tried to add some shadow into it and manipulate the transparency.
here is my version:

http://jsfiddle.net/4yZNN/

I decided to add something new to this.. Here is the Pen. It animates a 'glinting' effect when you hover near the line.

I made it hover when near a surround area (div) since it is quite difficult to get your cursor on that line. Especially if your not trying!