jQuery appends a <span> to each link. The span is absolutely positioned within the link to
match it's length and is 1px tall. On hover, the height is animated to match the line height.
ADVANTAGES: No images needed
DISADVANTAGES: Need to line break before links that span two lines, Firefox screws up links that begin new lines on their own,
span sits on top of text no matter what z-index tricky was tried (so must be transparent to show link text)
A solid background image is applied to each link. The links have hidden overflow. The background is pushed down far enough to look
like an underline. On hover, the background position is animated up to be a full background.
ADVANTAGES: Works on multi-line links, background is behind text
DISADVANTAGES: Image needed, underline is hard to simulate consistently cross-browser
(what is 1px in Firefox is hidden in Safari, 2px in Firefox is 1px in Safari)
A solid background image is applied to each link. The links have hidden overflow. The background is pushed down far enough to look
like an underline. On hover, the background position is animated up to be a full background.
ADVANTAGES: Works on multi-line links, background is behind text
DISADVANTAGES: Image needed, underline is hard to simulate consistently cross-browser
(what is 1px in Firefox is hidden in Safari, 2px in Firefox is 1px in Safari)