Making dashed or dotted link using CSS

Today, one of the friend of my office asked me how to make dotted or dashsed link as he was looking for “text-decoration” for making it.Today, I’ve come up with a very simple technique to make a dotted or dashed hyperlink using CSS.This technique might be known to most of you guys but it might be useful for those guys who don’t know about this technique.

Making dotted and dashed link using CSS

a
{
border-bottom:1px dotted #FF0000;
text-decoration:none;
color:#FF0000;
}

As, you can can you can use the border-bottom property to add the border in the bottom and then you must specify that text-decoration property to “none” to remove the underline from hyperlink which comes default in hyperlink. In the similar fashion, you can create dashed underline link with the following example code.

a
{
border-bottom:1px dashed #FF0000;
text-decoration:none;
color:#FF0000;
}

Popularity: 5% [?]