Interactive online courses HTML Academy
2026-03-09 10:53 Diff
https://htmlacademy.org/courses/html-css-basics/typography/text-decoration

You can establish additional design features for text using the text-decoration property. Here are its values:

  1. underline — It underlines text;
  2. line-through — It crosses out text;
  3. overline — It overlines text;
  4. none — It removes the above formatting.

You can apply several effects to the text at the same time by listing the values separated by a space:

p { text-decoration: underline; /* It underlines the text */ } span { /* The text is both underlined and crossed out */ text-decoration: underline line-through; }

The text-decoration property is shorthand, which means that it can be broken down into the following properties:

  • text-decoration-line — This defines the line formatting: crossed-out, underlined or overlined;
  • text-decoration-style — This defines the line style. It can take the following properties:
    • solid — Solid line;
    • double — Double line;
    • dotted — Dotted line;
    • dashed — Dashed line;
    • wavy — Wavy line.
  • text-decoration-color — Line color.