CSS Dashed Underline

Well, you must have noticed in text editors of Gmail or the Facebook commenting areas, that any wrongly spelled words are highlighted by putting a dashed underline. Some websites like the earlier Wordpress site, used anchor texts (hyperlinked texts) with a dashed underline and a solid one on hover. So I started wondering if I could use it. And here's what I finally have:


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

a:hover{
border-bottom: 1px solid #000000;
}

You'll have to put this code in your code. In the 'a' tag, we are removing underline because by default the anchor tags are underlined. We are not really using the underline property for ti\his feature. Instead we are using the border property to highlight the border bottom. It's dashed normally and solid on mouseover.

Here's a demo:

This is dashed  link
while this is the standard link