Text Decoration

How to use Text Decoration

The text-decoration property sets the type of text decoration used for the text. This adds an underline to all text inside the <p> element. Possible values for text-decoration include overline, line-through, underline and underline overline. Text decoration is a modern version or shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.

CSS

  .underline {
    text-decoration: underline;
  }
  .dotted-underline {
    text-decoration: underline dotted;
  }
  .yellow-dotted-underline {
    text-decoration: underline dotted yellow;
  }
  .grey-wavy-underline {
    text-decoration: grey wavy underline;
  }
  .blue-overline-underline {
    text-decoration: underline overline #006699;
  }

HTML

<p class="underline">Text with underline</p>
<p class="dotted-underline">Text with dotted underline</p>
<p class="yellow-dotted-underline">Text with yellow dotted underline</p>
<p class="grey-wavy-underline">Text with grey wavy underline</p>
<p class="blue-overline-underline">Text with blue overline and underline</p>

Example

Text with underline

Text with dotted underline

Text with yellow dotted underline

Text with grey wavy underline

Text with blue overline and underline