CSS TEXT DECORATION STYLES

In CSS, the text-decoration property controls lines added to text.

common text-decoration styles 

/* Underline */
text-decoration: underline;
/* Overline */
text-decoration: overline;
/* Line through / strikethrough */
text-decoration: line-through;
/* No decoration */
text-decoration: none;

More advanced styles

You can control the line style, color, and thickness:

text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 2px;

text-decoration-style values

text-decoration-style: solid;   /* ───── */
text-decoration-style: double;  /* ═════ */
text-decoration-style: dotted;  /* · · · */
text-decoration-style: dashed;  /* - - - */
text-decoration-style: wavy;    /* ~~~~~ */

Shorthand

You can combine them:

text-decoration: underline wavy red 2px;

Example:

<p class="fancy">Hello World</p>

.fancy {
  text-decoration: underline wavy red 2px;
}

You can also use text-underline-offset to control the distance between the text and underline:

text-underline-offset: 5px;