CSS text-decoration

css3 text

css:

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;
}

html:

<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>

Leave a Reply

Your email address will not be published. Required fields are marked *