CSS Text & Fonts

CSS Text Decoration

The CSS Text Decoration property is used to add or remove decorative lines from text.

It is commonly used to:

Underline text
Add overlines
Strike through text
Remove underlines from links

Text decoration helps emphasize content and improve the visual appearance of web pages.

Syntax

CSS Text Decoration Syntax

css

selector {
    text-decoration: value;
}

CSS Text Decoration Example

css

h1 {
    text-decoration: underline;
}

This adds an underline below all <h1> elements.

Attributes

Value	Description	Example
none	Removes decoration	text-decoration: none;
underline	Adds a line below the text	text-decoration: underline;
overline	Adds a line above the text	text-decoration: overline;
line-through	Adds a line through the text	text-decoration: line-through;
underline overline	Applies multiple decorations	text-decoration: underline overline;

Example

CSS Text Decoration Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Text Decoration Example</title>
    <style>
        .underline {
            text-decoration: underline;
        }
        .overline {
            text-decoration: overline;
        }
        .line-through {
            text-decoration: line-through;
        }
        .no-decoration {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1 class="underline">Underlined Heading</h1>
    <p class="overline">This paragraph has an overline.</p>
    <p class="line-through">This text has a line through it.</p>
    <a href="#" class="no-decoration">Link Without Underline</a>
</body>
</html>

Output

Browser Output

css

The heading will appear with an underline
The first paragraph will have an overline
The second paragraph will have a line through the text
The link will appear without the default underline

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Notes

Conclusion

The CSS Text Decoration property allows you to add visual emphasis to text through underlines, overlines, and strike-through effects. It is especially useful for styling links and highlighting important content while maintaining a clean and professional design.

PreviousCSS Text Alignment NextCSS Font Family