Edit in JSFiddle

a {
    color:#0000ff;
    /*text-decoration: underline;*/
    text-decoration-color:red;
    -moz-text-decoration-color:red;
    text-decoration-style:solid;
    -moz-text-decoration-style:solid;
    text-decoration-line: underline;
    -moz-text-decoration-line: underline;
}

a.double {
    text-decoration-style:double;
    -moz-text-decoration-style:double;
}
a.dotted {
    text-decoration-style:dotted;
    -moz-text-decoration-style:dotted;
}
a.dashed {
    text-decoration-style:dashed;
    -moz-text-decoration-style:dashed;
}
a.wavy {
    text-decoration-style:wavy;
    -moz-text-decoration-style:wavy;
}

a.overline {
    text-decoration-line: overline;
    -moz-text-decoration-line: overline;
}

a.line-through {
    text-decoration-line: line-through;
    -moz-text-decoration-line: line-through;
}

a.underline-overline-line-through {
    text-decoration-line: underline overline line-through;
    -moz-text-decoration-line: underline overline line-through;
}
<a href="#">link link link link link link</a>
<br>
<a href="#" class="double">double link double link double link</a>
<br>
<a href="#" class="dotted">dotted link dotted link dotted link</a>
<br>
<a href="#" class="dashed">dashed link dashed link dashed link</a>
<br>
<a href="#" class="wavy">wavy link wavy link wavy link</a>

<br><br>
<a href="#" class="overline">overline link overline link</a>

<br><br>
<a href="#" class="line-through">line-through link line-through link</a>

<br><br>
<a href="#" class="underline-overline-line-through">underline overline line-through link</a>