CSS Text-decoration

CSS text-decoration Property – Style Text Underlines, Lines, and Effects

The text-decoration property in CSS is used to set or remove decorations on text. It allows you to style text with underlines, overlines, line-throughs (strikethroughs), or to remove any existing decoration.

Syntax

element {
    text-decoration: none | underline | overline | line-through | blink | inherit | initial | unset;
}

Property Values

none: Removes any decoration from the text.
underline: Adds an underline beneath the text.
overline: Adds a line above the text.
line-through: Adds a line through the text (strikethrough).
blink: Makes the text blink (not widely supported).
inherit: Inherits the text-decoration value from the parent element.
initial: Resets the property to its default value.
unset: Resets the property to its inherited value if possible, or to its initial value if not.

Examples

Example 1: Removing Underline from Links

By default, links (<a> tags) are underlined. You can remove this with text-decoration: none;.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#">This is a link without an underline.</a>
</body>
</html>

Try It Now

Example 2: Underlined Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>This text is underlined.</p>
</body>
</html>

Try It Now

Example 3: Overline and Line-through

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        h1 {
            text-decoration: overline;
        }
        del {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1>This text has an overline.</h1>
    <p><del>This text is struck through.</del></p>
</body>
</html>

Try It Now

Using `text-decoration` Shorthand

CSS3 introduced the shorthand text-decoration property, which can include multiple text-decoration properties in one declaration:

text-decoration: underline overline line-through;

This will apply underline, overline, and line-through decorations to the text.

Example: Combining Multiple Decorations

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-decoration: underline overline line-through;
        }
    </style>
</head>
<body>
    <p>This text has an underline, overline, and line-through.</p>
</body>
</html>

Try It Now

Notes

Text Decoration Color: Use the text-decoration-color property to set the color of the text decoration.
Text Decoration Style: Use the text-decoration-style property to set the style of the line (solid, double, dotted, dashed, wavy).

Example with Custom Style and Color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            text-decoration: underline;
            text-decoration-color: red;
            text-decoration-style: wavy;
        }
    </style>
</head>
<body>
    <p>This text has a wavy red underline.</p>
</body>
</html>

Try It Now

Tips

Use text-decoration: none; for cleaner navigation links or to create custom hover effects.
Combine text-decoration with hover pseudo-class for interactive effects.
Experiment with different text-decoration-style values for creative text effects.

The text-decoration property offers a simple yet powerful way to style text in your web pages, making it a crucial tool for both aesthetic and functional design.