CSS text-decoration Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 29 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The text-decoration property in CSS is used to set the text formatting to underline, overline, line-through, or a combination of these styles.

It is a shorthand property for several sub-properties that allow you to control the appearance of decorative lines on text.

💡 Syntax

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

Syntax

Copied

element {
  text-decoration: value;
}

The value can be a combination of keywords and other values.

🎛️ Default Value

The default value of the text-decoration property is none, which means no decoration is applied to the text.

🏠 Property Values

Value	Description
none	Removes any text decoration.
underline	Adds an underline beneath the text.
overline	Adds a line above the text.
line-through	Adds a line through the text.
blink	Causes the text to blink (Note: Blinking text is not widely supported and can be distracting).
text-decoration-color	Specifies the color of the decoration line.
text-decoration-style	Specifies the style of the decoration line (solid, double, dotted, dashed, wavy).
text-decoration-thickness	Specifies the thickness of the decoration line.

📄 Example

In this example, we'll demonstrate different text-decoration values.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS text-decoration Example</title>
  <style>
    .underline {
      text-decoration: underline;
    }
    .overline {
      text-decoration: overline;
    }
    .line-through {
      text-decoration: line-through;
    }
    .custom {
      text-decoration: underline wavy red;
    }
  </style>
</head>
<body>
  <h1>Text Decoration Examples</h1>
  <p class="underline">This text is underlined.</p>
  <p class="overline">This text has an overline.</p>
  <p class="line-through">This text has a line through it.</p>
  <p class="custom">This text has a wavy red underline.</p>
</body>
</html>

🖥️ Browser Compatibility

The text-decoration property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. The text-decoration-thickness and text-decoration-style sub-properties are also supported in most modern browsers, but it is always a good practice to test your website to ensure compatibility.

🎉 Conclusion

The text-decoration property is a versatile tool for adding emphasis or style to your text.

Whether you need underlines, overlines, or line-throughs, this property offers a range of options to enhance your typography. Experiment with different values and combinations to find the perfect style for your text elements.