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.
How is it done?
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.
That should have been border-bottom : ( etc ), but I forgot to disable smilies.
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.
Oh well. Ta anyway!
Sorry. The Windows underlining occurs in Windows Explorer, on mouseover in the left-hand pane (in case I confused anyone).
Well, if it can be done in CSS1 or 2, I don’t know about it. An alternative would be simple graphic buttons - image swap 'em ?
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!).