CSS Typography Text Decoration


Example

The text-decoration property is used to set or remove decorations from text.

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

text-decoration can be used in combination with text-decoration-style and text-decoration-color as a shorthand property:

.title { text-decoration: underline dotted blue; }

This is a shorthand version of

.title {
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

It should be noted that the following properties are only supported in Firefox

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip