CSS text-decoration

The CSS text-decoration property is used to add visual effects to text, such as underlines, overlines, line-throughs, and blinking effects. It can be applied to inline-level elements like text, links, and headings to enhance their appearance or indicate special states.

The syntax for the text-decoration property is as follows:

selector {
  text-decoration: value;
}

• selector: Represents the HTML element or class to which the text-decoration property will be applied.
• value: Specifies the type of decoration to apply. It can take one or multiple values separated by spaces.

The possible values for text-decoration are:

1. none (default): No text decoration is applied.
2. underline: Adds a horizontal line beneath the text.
3. overline: Adds a horizontal line above the text.
4. line-through: Adds a horizontal line through the middle of the text, striking it out.
5. blink: Makes the text blink on and off (this value is deprecated and not widely supported).

You can apply multiple decorations by using space-separated values. For example:

a {
  text-decoration: underline line-through;
}

In this example, the links will have both an underline and a line-through effect.

You can also control the color and style of the text decorations using additional properties:

• text-decoration-color: Specifies the color of the text decoration.
• text-decoration-style: Specifies the style of the text decoration (e.g., solid, dotted, dashed, double, etc.).

Example:

a {
  text-decoration: underline;
  text-decoration-color: blue;
  text-decoration-style: dotted;
}

In this example, the links will have a blue underline with a dotted style.

It’s essential to use text-decoration judiciously to ensure the text remains readable and visually pleasing. For example, underlines are commonly used for hyperlinks, while line-throughs may indicate deleted or outdated content.

Keep in mind that different browsers may render text decorations slightly differently, and some properties like text-decoration-color and text-decoration-style may not be fully supported in older browsers. Always test your styles in various browsers to ensure consistent display.