📘 What is CSS Text Decoration?

The CSS text-decoration property is used to add decorative lines to text.

You can use it to create underlined text, overlined text, crossed-out text and more advanced decoration effects.

🧩 CSS Text Decoration Syntax

selector {
    text-decoration: value;
}

The most common values are underline, overline, line-through and none.

🔑 Text Decoration Values

🔵 Example 1: Underline

Use text-decoration: underline; to place a line below text.

h2 {
    text-decoration: underline;
}

🔼 Example 2: Overline

Use overline to place a line above the text.

h2 {
    text-decoration: overline;
}

❌ Example 3: Line Through

The line-through value draws a line through the text.

.price {
    text-decoration: line-through;
}

🚫 Example 4: Remove Decoration

Use text-decoration: none; to remove an existing text decoration.

a {
    text-decoration: none;
}

↕️ Example 5: Underline + Overline

You can apply more than one decoration at the same time.

h2 {
    text-decoration:
        underline
        overline;
}

🎨 Text Decoration Style

The text-decoration-style property controls the visual style of the decoration line.

💻 Decoration Style Code

.text {
    text-decoration-line: underline;
    text-decoration-style: wavy;
}

Common styles include: solid, double, dotted, dashed and wavy.

🌈 Text Decoration Color

Use text-decoration-color to change the color of the decoration line.

.text {
    text-decoration-line: underline;
    text-decoration-color: #087fbc;
}

📏 Text Decoration Thickness

The text-decoration-thickness property controls the thickness of the decoration line.

.text {
    text-decoration-line: underline;
    text-decoration-thickness: 4px;
}

⚡ Text Decoration Shorthand

The text-decoration property can combine multiple decoration settings into one declaration.

.text {
    text-decoration:
        underline
        #087fbc
        wavy
        3px;
}

🧱 Individual Text Decoration Properties

🔗 CSS Text Decoration and Links

Browsers commonly display links with an underline. You can remove that underline with CSS.

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

💡 Practical Uses

⚠️ Common Mistakes

• Using too many decorative lines on normal text.
• Using low-contrast decoration colors.
• Making decoration thickness too large.
• Forgetting to remove default link decoration when creating custom navigation.
• Using decorative styles that reduce readability.

📝 Practice Exercises

Open your HTML Runner and complete these exercises:

1. Create an h1 with an underline.
2. Create an h2 with an overline.
3. Create a price with line-through.
4. Remove the underline from a link.
5. Create a dotted underline.
6. Create a dashed underline.
7. Create a wavy underline.
8. Change the decoration color.
9. Increase the decoration thickness to 5px.
10. Create a custom decoration using the shorthand property.

📚 Quick Reference

🎓 Key Points to Remember

• text-decoration adds decorative lines to text.
• underline places a line below text.
• overline places a line above text.
• line-through draws a line through text.
• none removes decoration.
• text-decoration-style controls the line style.
• text-decoration-color controls the line color.
• text-decoration-thickness controls line thickness.
• Multiple decoration properties can be combined using shorthand.