CSS textdecorationline Property (original) (raw)

CSS text-decoration-line Property

Last Updated : 28 May, 2026

The text-decoration-line property in CSS is used to define the type of text decoration applied to text elements. It allows developers to add effects like underlines, overlines, or strike-through lines to enhance text styling.

• Supports decoration values such as underline, overline, and line-through.
• Can be combined with text-decoration-style and text-decoration-color for advanced decoration effects.
• Helps highlight important text and improve the visual presentation of content.

**Syntax:

text-decoration-line: none | underline | overline | line-through | initial | inherit;

The text-decoration property is a shorthand property for text-decoration-line(required), text-decoration-color, and text-decoration-style.

**Property Values: All the properties are described well in the example below.

**1. none:

It is the default value and is used to specify no line for the text to decorate the text.

**Syntax:

text-decoration-line: none;

**Example: This demonstrates the use of text-decoration-line Property whose value is set as none.

HTML `

<!-- text-decoration-line property used here -->
<style>
    h1 {
        color: green;
        text-decoration-line: none;
    }

    .gfg {
        text-decoration-line: none;
        font-weight: bold;
    }
</style>

GeeksforGeeks

text-decoration-line: none;

GeeksforGeeks: A computer science portal

`

**2. underline:

It is used to display a line below or under a text.

**Syntax:

text-decoration-line: underline;

**Example: This demonstrates the use of text-decoration-line Property whose value is set to underline.

HTML `

<!-- text-decoration-line property used here -->
<style>
    h1 {
        color: green;
        text-decoration-line: underline;
    }

    .gfg {
        text-decoration-line: underline;
        font-weight: bold;
    }
</style>

GeeksforGeeks

text-decoration-line:underline;

GeeksforGeeks: A computer science portal

`

**3. overline:

It is used to display a line over the text.

**Syntax:

text-decoration-line: overline;

**Example: This demonstrates the use of text-decoration-line Property whose value is set to overline.

HTML `

<!-- text-decoration-line property used here -->
<style>
    h1 {
        color: green;
        text-decoration-line: overline;
    }

    .gfg {
        text-decoration-line: overline;
        font-weight: bold;
    }
</style>

GeeksforGeeks

text-decoration-line:overline;

GeeksforGeeks: A computer science portal

`

**4. line-through:

It is used to display a line through a text.

**Syntax:

text-decoration-line: line through;

**Example: This demonstrates the use of text-decoration-line Property whose value is set to line-through.

HTML `

<!-- text-decoration-line property used here -->
<style>
    h1 {
        color: green;
        text-decoration-line: line-through;
    }

    .gfg {
        text-decoration-line: line-through;
        font-weight: bold;
    }
</style>

GeeksforGeeks

text-decoration-line:line-through;

GeeksforGeeks: A computer science portal

`

5. **initial:

It is used to set an element’s CSS property to its default value. It is the same as none property.

**Syntax:

text-decoration-line: initial;

**Example: This demonstrates the use of text-decoration-line Property whose value is set to initial.

HTML `

<!-- text-decoration-line property used here -->
<style>
h1 {
    color: green;
    text-decoration-line: initial;
}

.gfg {
    text-decoration-line: initial;
    font-weight: bold;
}
</style>

GeeksforGeeks

text-decoration-line:initial;

GeeksforGeeks: A computer science portal

`