CSS Basics: Mastering Text-Decoration – A Guide to Unlocking Your Creativity in Typography

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.

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.

Underline or Strike Through Text Using text-decoration

/* 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 Text Using a Custom CSS Class

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

In the HTML code, the text you want to underline is enclosed in <span class="underline"> and </span>, for example.

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