text-decoration

by

Text-decoration is a CSS property used to apply decorative lines to text. It’s commonly used for underlining links, but you can also use it to create other effects.

Basic Usage

/* Apply underline to all links */
a {
  text-decoration: underline;
}

/* Remove underline from all links */
a {
  text-decoration: none;
}

Values for text-decoration

  • underline: Adds a line below the text.
  • overline: Adds a line above the text.
  • line-through: Adds a line through the middle of the text.
  • blink: Causes the text to blink (not widely supported).
  • none: Removes any text decoration.

Combining values

You can combine multiple values using spaces:

/* Underline and strikethrough text */
p {
  text-decoration: underline line-through;
}

Customizing the decoration

For more control, use the following properties:

  • text-decoration-line: Sets the type of line (underline, overline, line-through, none).
  • text-decoration-style: Sets the style of the line (solid, double, dotted, dashed, wavy).
  • text-decoration-color: Sets the color of the line.
/* Red dotted underline */
p {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: red;
}

Example

<!DOCTYPE html>
<html>
<head>
<style>
a {
  text-decoration: none;
  color: blue;
}

a:hover {
  text-decoration: underline;
}
</style>
</head>
<body>
  <a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

This example removes the underline from the link by default but adds it when the user hovers over the link.

Note: The blink value for text-decoration is generally not recommended as it can be distracting and is not widely supported by modern browsers.