How to Add hyperlink underline dotted / dashed in css posts

A link with above example will look like this.

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.

1st - 

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

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

2nd -

Example

.widget a {
text-decoration: underline;
}  

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

3rd -

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