CSS Basics: Transform Your Words with Text-Decoration – Creative Techniques to Make Your Texts Pop

CSS Property Text-Decoration – Add Decorative Effects to Text

The CSS property text-decoration is used to add decorative effects to text. It is a shorthand property for:

text-decoration-line (required)

text-decoration-color (optional)

text-decoration-style (optional)

text-decoration-thickness (optional)

It is mainly used to underline or strike through text, or to draw a horizontal line above or below the text.

Tip:
You can combine more than one line type, such as underline and overline, to draw a line both at the bottom and at the top of the text.

The line that is added as a typographic feature below or above the text is also known as overscore or overbar resp. underscore or underbar.

The value shown in orange is the standard use of the CSS text-decoration property.

1. The CSS property is commonly used as follows:

   • don't draw a line ➜ text-decoration: none
   • underline using a single solid line ➜ text-decoration: underline
   • overline using a single solid line ➜ text-decoration: overline
   • strike through using a single solid line ➜ text-decoration: line-through

2. Optionally, you can also specify the color that will be used to draw the line. The line color can be defined by using the hex code #RRGGBB or by using the corresponding HTML Color Name.

3. Optionally, you can also specify the the thickness of the line.

4. Optionally, you can also specify the line style. The following values are possible:

   • solid ➜ draws a single solid line
   • double ➜ draws a double solid lines
   • dotted ➜ draws a single dotted line
   • dashed ➜ draws a single dashed line
   • wavy ➜ draws a single wavy line

5. The value blink is obsolete and should no longer be used. All major browsers don't support blink any more.

6. initial forces the restoration of the original text decoration, i.e. the value initial restores the default value of the element's text-decoration property.

/* Paragraph */
p {
  /* 10% larger than default */
  font-size: 1.1em;

  /* color black */
  color: black;
}


/* Underline text in red */
u {
  /* double underline using thicker lines */
  text-decoration: underline red 2px double;
}

In HTML code, you can use the U-Tag,   you can use the U tag to markup text that you want to look different than regular text. This can be, for example, spelling mistakes in the text. Using the u tag is criticized in the HTML specification. If it is really necessary to have underlined text, it is a better idea to define a separate class such as underline.

.underline {
  /* underline text */
  text-decoration: underline;
}

In the HTML code, the text that is to be underlined starts with <span class="underline">, for example, and has to be closed with </span>.

As a general rule, underlining should never be used to emphasize text.