CSS
🎯 CSS text-decoration-line Property
The text-decoration-line property in CSS defines which type of line is applied to text.
It allows you to add underline, overline, or strikethrough effects to text in a simple way.
This property is widely used in links, headings, navigation menus, and UI design elements.
💬 What is text-decoration-line used for?
The text-decoration-line property helps you define which decorative line should appear on text.
It is especially useful when styling links, buttons, and emphasized content.
🔹 Basic Usage
CSS
text-decoration-line: underline;
➡️ This adds a line under the text.
🧩 Values
| Value | Description |
|---|---|
| none | No decoration line is applied |
| underline | Adds a line under the text |
| overline | Adds a line above the text |
| line-through | Adds a line through the text (strikethrough) |
| initial | Resets to browser default value |
| inherit | Inherits value from parent element |
1. Underline Example
HTML
<p style="text-decoration-line: underline;">
Underlined text
</p>
2. Overline Example
HTML
<p style="text-decoration-line: overline;">
Overlined text
</p>
3. Strikethrough Example
HTML
<p style="text-decoration-line: line-through;">
Strikethrough text
</p>
4. No Decoration
HTML
<p style="text-decoration-line: none;">
Normal text without decoration
</p>
🔍 Quick Summary
- text-decoration-line defines which line appears on text
- Most used values: underline, overline, line-through
- none removes decoration completely
- inherit takes value from parent element
-
🧠 Summary
- The text-decoration-line property is used to control which decorative line is applied to text.
- It is commonly used in modern UI design for links, buttons, and highlighted text.
- It improves readability and visual structure in web design.