Styling link underlines

[JD]

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

[Ben C]

On 2008-11-12, JD <us**@example.orgwrote:

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

Yes.

or can it be done by directly styling the underline using CSS?

No. You just get text-decoration: underline, which gives you a solid
line the same colour as the text.

[Hendrik Maryns]

Ben C schreef:

On 2008-11-12, JD <us**@example.orgwrote:

>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

Yes.

How do you tell?

>or can it be done by directly styling the underline using CSS?

No. You just get text-decoration: underline, which gives you a solid
line the same colour as the text.

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

[Bergamot]

Ben C wrote:

On 2008-11-12, JD <us**@example.orgwrote:

>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

Yes.

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

--
Berg

[Ben C]

On 2008-11-12, Hendrik Maryns <gt*******@sneakemail.comwrote:

Ben C schreef:

>On 2008-11-12, JD <us**@example.orgwrote:

>>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

Yes.

How do you tell?

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.

>>or can it be done by directly styling the underline using CSS?

No. You just get text-decoration: underline, which gives you a solid
line the same colour as the text.

You can do

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

Yes that sort of thing.

[JD]

Ben C wrote:

On 2008-11-12, Hendrik Maryns <gt*******@sneakemail.comwrote:

>Ben C schreef:

>>On 2008-11-12, JD <us**@example.orgwrote:
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
Yes.

How do you tell?

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.

>>>or can it be done by directly styling the underline using CSS?
No. You just get text-decoration: underline, which gives you a solid
line the same colour as the text.

You can do

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

Yes that sort of thing.

Can you put a border on an inline element like that?

[Hendrik Maryns]

Ben C schreef:

On 2008-11-12, Hendrik Maryns <gt*******@sneakemail.comwrote:

>Ben C schreef:

>>On 2008-11-12, JD <us**@example.orgwrote:
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
Yes.

How do you tell?

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.

>>>or can it be done by directly styling the underline using CSS?
No. You just get text-decoration: underline, which gives you a solid
line the same colour as the text.

You can do

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

Yes that sort of thing.

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

[Ben C]

On 2008-11-12, Hendrik Maryns <gt*******@sneakemail.comwrote:

Ben C schreef:

>On 2008-11-12, Hendrik Maryns <gt*******@sneakemail.comwrote:

>>Ben C schreef:
On 2008-11-12, JD <us**@example.orgwrote:
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
Yes.
How do you tell?

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.

>>>>or can it be done by directly styling the underline using CSS?
No. You just get text-decoration: underline, which gives you a solid
line the same colour as the text.
You can do

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

Yes that sort of thing.

Ah, ok, I see, but I think it is a nice solution and wouldn’t call it a
hack either.

I wouldn't either, but I suppose you could argue that it's a hack
because you're using a border to do underlining.

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.

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.

[Ben C]

On 2008-11-12, JD <us**@example.netwrote:

Ben C wrote:

>On 2008-11-12, Hendrik Maryns <gt*******@sneakemail.comwrote:

[...]

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

Yes that sort of thing.

Can you put a border on an inline element like that?

Yes there's no problem with that.

[dorayme]

In article <6o************@mid.individual.net>,
Bergamot <be******@visi.comwrote:

Ben C wrote:

On 2008-11-12, JD <us**@example.orgwrote:

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

Yes.

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

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

[Roy A.]

On 12 Nov, 14:36, JD <[e-mail]:

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).

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.

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

On anchor links an solid underline is the convention.