CSS: Text Decoration, Underline, Overline, Line Through, Wavy

text-decoration

The property text-decoration is a shorthand for

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness

example

example

code

.td-c3b9a5 {
 text-decoration: underline wavy 2px red;
}

text-decoration-line

text-decoration-line: underline;

example

.td-under-bb12 {
 text-decoration-line: underline;
}

text-decoration-line: overline;

example

.td-over-c1c5 {
 text-decoration-line: overline;
}

text-decoration-line: line-through;

example

.td-thru-ee0c {
 text-decoration-line: line-through;
}

text-decoration-line: blink;

obsolete.

text-decoration-style

text-decoration-style: wavy;

example

.td-wavy-cff0 {
 text-decoration: underline;
 text-decoration-style: wavy;
}

text-decoration-style: solid;

example

.td351-solid {
 text-decoration: underline;
 text-decoration-style: solid;
}

text-decoration-style: double;

example

.td351-double {
 text-decoration: underline;
 text-decoration-style: double;
}

text-decoration-style: dotted;

example

.td351-dotted {
 text-decoration: underline;
 text-decoration-style: dotted;
}

text-decoration-style: dashed;

example

.td351-dashed {
 text-decoration: underline;
 text-decoration-style: dashed;
}

text-decoration-color

example

.td-color-a29f {
 text-decoration: underline;
 text-decoration-color:red;
}

text-decoration-thickness

example

.td-thick-e311 {
 text-decoration: underline;
 text-decoration-thickness: 5px;
 text-decoration-color: red;
}

example fat wavy

.td-fatwavy-wZZpw {
 text-decoration: underline;
 text-decoration-style: wavy;
 text-decoration-thickness: 5px;
 text-decoration-color: red;
}