🎓 A1Learner
🔍

CSS Text Decoration

Text decoration is a line drawn on text, such as an underline. The text-decoration property sets that line.

Underline the heading

The value underline draws a line under the heading text.

h1 {
  text-decoration: underline;
}

Remove the link underline

Links are underlined by default. The value none removes that line.

a {
  text-decoration: none;
}

Give the line a wavy style

The text-decoration-style property changes the pattern of the line. This example makes the underline wavy.

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

Show a heading in capitals

The text-transform property changes the letters on screen. The text in the HTML stays as written.

h2 {
  text-transform: uppercase;
}

Example

h1 {
  text-decoration: underline;
}
a {
  text-decoration: none;
}
.intro {
  text-decoration: underline;
  text-decoration-style: wavy;
}
h2 {
  text-transform: uppercase;
}

Key points

  • Use underline, overline or line-through to choose where the line sits.
  • The style of the line can be solid, wavy or dotted.
  • The text-decoration shorthand can set the line, its style and its colour together.
  • Use capitalize to start each word with a capital letter.
  • Use lowercase to show every letter in small form.
  • A decoration line is part of the text display. It is not a border.

In this example, the heading gets an underline. The link loses its underline. The intro paragraph gets an underline with a wavy style. The heading inside the box is shown in capitals. Its HTML text stays unchanged.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which property draws a line under text?