text-decoration dotted / dashed underline

2010-01-16 @ 14:32

Problem

How do I set text-decoration: underline to dotted or dashed?

Solution

Don’t use text-decoration at all. Use border-bottom on the anchor tag instead.

Example

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

Change ”dotted” to ”dashed” for a dashed underline.

A link with above example will look like this.

Works with (browsers)

Share
RSS-feed for comments

8 replys to “text-decoration dotted / dashed underline”

Leave a reply