CSS Text-decoration

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;
}

Try It Now

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;

Try It Now

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.