dotted underline syles

how do you........?

[ChrisBolton]

I came across a style I thought looked pretty good recently on the uxmag.com website.

A number of times on the home page they have links which are a dotted underline. In the hover state the underline gets a few shades darker but the text remains the same colour.

Does anyone know how to do this?

Regards.
Chris.

[Setek]

Normally, anchors use the

text-decoration

property to determine

blink, underline, overline, line-through

.

When you want something a little funkier, switch your anchor to

text-decoration: none;

and use

border-bottom: 1px Dotted #hex;

instead.

Note, this property value will extend when you have an

a img

, whereas

text-decoration

will not.

[mihai2u]

Be carefull and use a bottom margin in the normal state, that has the same width as the :hover border. (the link should have the same height in both :normal and :hover states).

Why? Because when you have the mouse right over the bottom border you will receive a buggy "blink" effect. Try it and see.

[ChrisBolton]

I tried the 'border-bottom' at '2px' which you suggested and it appears to be exactly what I am looking for. It also lets me set a different colour for the hover state which is great.

Only one problem, there doesn't seem to be any regularity with the dots at all, they seem to be unequally spaced and some extend way past the text on some links.

Do you know why this is, and how it can be prevented, it looks so much smoother on the uxmag site. No images are used at all around the links in this div.

Regards.
Chris.

[choster]

Also note that IE through version 6 does not support dotted borders, it renders them as solid or dashed.

[mihai2u]

Try the border:dashed, I prefer this instead of the dotted one... or use images instead.

If you look in that site's CSS, you will see that it uses images for the background of the links:

a, a:visited {
color: #003366;
text-decoration: none;
background-image: url(/_images/link_dotted.png);
background-repeat: repeat-x;
background-position: bottom;}

a:hover {
background-image: url(/_images/link_solid.png);}

[ChrisBolton]

I chose the image option and used a style similar to theirs. It looks great, I'm really happy with it.

Cheers guys, you were a great help.

Regards.
Chris.