Text Decoration

Lines on text can mean different things. Underlined usually means a link. Strikethrough means something is outdated. Overline looks like a heading style. In CSS, you control all of that with text-decoration.

text-decoration Properties

The text-decoration shorthand combines three things: the line type, the color, and the style.

.underline    { text-decoration: underline; }
.overline     { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.none         { text-decoration: none; }

• underline — a line below the text. Default for links.
• overline — a line above the text.
• line-through — a line through the middle. For showing deleted content.
• none — removes any decoration. Commonly used to remove underlines from links.

Decoration Style and Color

You can get fancy with the line style and color:

.wavy-underline {
  text-decoration: underline wavy red;
}
.dotted-overline {
  text-decoration: overline dotted blue;
}
.double-line {
  text-decoration: underline double green;
}

The line style can be solid, double, dotted, dashed, or wavy. Not all browsers support every combination, but the basics work everywhere.

text-transform

text-transform changes the casing of your text without touching the HTML:

.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }

• uppercase — EVERY LETTER IS CAPITAL
• lowercase — every letter is lowercase
• capitalize — First Letter Of Each Word Is Capital

This is great for consistency. You can enforce heading styles from the CSS instead of worrying about how the content is typed in the HTML.