CSS Text Decoration

text-decoration draws lines on text: underline, overline or line-through.

1
2
3
4
5
6
7
8
9
10

<style>
  .u { text-decoration: underline; }
  .o { text-decoration: overline; }
  .s { text-decoration: line-through; }
  .none { text-decoration: none; }
</style>
<p class="u">underline</p>
<p class="o">overline</p>
<p class="s">line-through (a crossed-out price)</p>
<p><a class="none" href="#">A link with its underline removed</a></p>

Fine control

The shorthand takes a line, a style, a color and a thickness, and you can also set them individually.

1
2
3
4
5
6
7
8
9

<style>
  a {
    color: #1a5276;
    text-decoration: underline wavy #d94a00;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
</style>
<a href="#">A link with a wavy orange underline</a>

• text-decoration-style: solid, dotted, dashed, double, wavy.
• text-decoration-color and text-decoration-thickness.
• text-underline-offset moves the underline away from the text so it stops cutting through letters with tails (g, y, p).

Removing link underlines: a warning

Many designs remove underlines from links. If you do, make sure links are still clearly different from the text around them, for example with a distinct color and a hover effect. Underlines are the most reliable way to tell people “this is clickable”. Styling Links goes further.