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

By Xah Lee. Date: . Last updated: .

text-decoration-line

underline

example

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

overline

example

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

line-through

example

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

blink

example

.blink-68b3 {
 text-decoration-line: blink;
}

text-decoration-style

wavy

example

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

example

.wavy-e37f {
 text-decoration: overline;
 text-decoration-style: wavy;
}

solid

example

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

double

example

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

dotted

example

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

dashed

example

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

text-decoration-color

example

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

text-decoration-thickness

example

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

example fat wavy

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

text-decoration (CSS Shorthand)

text-decoration

example

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

CSS, Text Decoration