CSS: Overflow:hidden removing border-bottom?

Question

I am making a HTML page, and have attempted to set a <a> tag a border-bottom.

It would not show, whatever I did. So I made a reduced test case that can be seen here:

http://codepen.io/hwg/pen/ILKdx

Happens in FF beta, and Chrome 22.

If I remove the overflow:hidden; or change it to overflow:visible, it works. The problem is that I need to have that set.

So how can I have a border-bottom? (or is it me :) )

(I cannot use text-underline, want it dotted)

Thanks

Harley

Answer 1

display:inline-block; on the link seems to do the trick.

Answer 2

try increasing the line-height. eg. add line-height:200%; to the #test css