Styling link underlines

I've seen websites where the link underline is a different colour to the
link text. I've also seen links with dotted underlines (see the hover
effect on the 'Change' and 'All Microsoft Sites' links at the top right
of this page for an example: http://support.microsoft.com/kb/253503).

Do these techniques involve background image/border hacks or can it be
done by directly styling the underline using CSS?

Thanks

re: Styling link underlines

On 2008-11-12, JD <user@example.orgwrote:Yes.
No. You just get text-decoration: underline, which gives you a solid
line the same colour as the text.

re: Styling link underlines

Ben C schreef:How do you tell?
You can do

a:hover {
color: yellow;
border-bottom: dotted;
}

Which is what the Microsoft seems to do to me. (with classes of course,
and also for :active and :focus).

Cheers, H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html

re: Styling link underlines

Ben C wrote:I wouldn't call using the border properties a hack, though, but an alternative to the text-decoration property.

--
Berg

re: Styling link underlines

On 2008-11-12, Hendrik Maryns <gtw37bn02@sneakemail.comwrote:I just know you can't do it with text-decoration. Therefore it must be
done some other way, and a border is the obvious one.
Yes that sort of thing.

re: Styling link underlines

Ben C wrote:Can you put a border on an inline element like that?

re: Styling link underlines

Ben C schreef:Ah, ok, I see, but I think it is a nice solution and wouldn’t call it a
hack either. There is a visible difference though: underline is closer
to the text than border (by default), since the border is below the
descenders, whereas the underline goes through them. You can see this
on the site the OP mentioned.

H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html

re: Styling link underlines

On 2008-11-12, Hendrik Maryns <gtw37bn02@sneakemail.comwrote:I wouldn't either, but I suppose you could argue that it's a hack
because you're using a border to do underlining.
Yes. The CSS specification doesn't define exactly where the bottom
border on an inline box goes, but most browsers put it at the font's
maximum descent. A bit too low for an underline really which usually
cuts through descenders.

re: Styling link underlines

On 2008-11-12, JD <user@example.netwrote:[...]Yes there's no problem with that.

re: Styling link underlines

In article <6o0c7bF1880mU1@mid.individual.net>,
Bergamot <bergamot@visi.comwrote:
A hack is relative to a task. If you just know someone used a hammer for
something or or other (but not what) under the bonnet of a car, a purist
mechanic would not disapprove. There are some things for which a hammer
on an engine is quite the right tool. But if he knew it was for driving
in an unimportant bolt (whose thread was damaged), he would raise an
eyebrow or wince. That raised eyebrow or that wince would mean, to those
who knew about these things, that the thread should be cleaned up (and
recut if necessary) and a spanner used.

If you cannot use text-decoration to underline a link to suit your
purpose, and you use border instead, there must be some slight, almost
imperceptible use of the muscles that operate the eyebrows or power a
wince.

It might be different for earthlings, some beings have logs that
register all 'muscle' activity, however slight.

--
dorayme

re: Styling link underlines

On 12 Nov, 14:36, JD <u...@example.orgwrote:I am confused. What do an dotted underline means? To some users this
line looks exactly the same as the green dotted underline they are
using in their own help system.

Browsers are also rendering elements like abbr and acronym with a
dotted underline.

I don't think it is wise make your own conventions like that.
On anchor links an solid underline is the convention.