I know how to use CSS to change the text-decoration property and otherwise customise .hover characteristics. What I’d like to do is remove the gap between the underline and the link text – that gap of a pixel or two – and I’m convinced I’ve seen this on a handful of websites.
If I understand you, Matt, I thought having no gap was pretty much the default (like on this page) ? Having siad that, I have little more than a working knowledge myself.
BTW, as you like a clean look, aren’t you tempted to remove the line altogether and just have hover ?
There’s usually a gap of about a pixel or two between the bottom of the non-hanging characters in links and the underline (when links are underlined – I normally switch that off through Opera). I’m sure I’ve seen sites that have the underline flush with the bottom of non-hanging characters, but I’m buggered if I know how to do it.
I’ve tried fiddling with margin-bottom, padding and even replacing text-decoration:underline with border-bottom:(etc), but nothing works. It’s only a trivial thing, but I’d like to know how it’s done.
I currently have the ‘clean’ look, but quite like this alternative form of underlining. Just curious, really, and I dislike not being able to work something out like that.
I’ve been using CSS for 'kin years, and I’ve never heard of this phenomenon, nor seen it. I’d imagine it’s a properly of the font used, rather than a stylesheet property.
Bugger. I’m now starting to suspect that. I recently installed Lucida Grande, and when I use it as the icon font in Windows, it creates the flush underline effect I want. When I use any other font (say Tahoma) the underline is ‘padded’ as normal.
Nah. I’m trying to keep it simple with text links and minimal use of images. I’m trying to replace image rollovers with plain non-graphic CSS-based ones (I love CSS at the moment!).