CSS text-decoration-line Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The text-decoration-line property in CSS is used to specify what kind of text decoration should be applied to the text.

This property allows you to add underlines, overlines, line-throughs, or a combination of these to your text, giving you greater control over text styling.

💡 Syntax

The syntax for the text-decoration-line property is simple. It can take one or more values to specify the desired text decoration.

Syntax

Copied

element {
  text-decoration-line: value;
}

🎛️ Default Value

The default value of the text-decoration-line property is none, meaning no text decoration is applied.

🏠 Property Values

Value	Description
none	No text decoration.
underline	Draws a line beneath the text.
overline	Draws a line above the text.
line-through	Draws a line through the text.
blink	Causes the text to blink (not widely supported and generally not recommended).

📄 Example

In this example, we'll demonstrate how to use the text-decoration-line property to underline text.

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-line Example</title>
  <style>
    p.underline {
      text-decoration-line: underline;
    }
  </style>
</head>
<body>
  <h1>Text Decoration Example</h1>
  <p class="underline">This text has an underline.</p>
</body>
</html>

🖥️ Browser Compatibility

The text-decoration-line property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The text-decoration-line property is a useful tool for adding various text decorations to your content.

Whether you need to underline, overline, or strike through your text, this property gives you the flexibility to enhance your text styling in a visually appealing way. Experiment with different values to see how this property can improve the readability and design of your web projects.