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

Simon Urbina

Simon is a Product Designer and Front End Dev with over 20 years of experience. He started as a graphic designer and illustrator coding his first website in 1996. He has worked with brands like Publix, Microsoft, and Discovery Channel.

Twitter