Introduction

The text-decoration-line CSS property adds decorative lines to text elements, such as underlines, overlines, or strike-through lines. This helps highlight important text and improves readability. When using multiple text decoration properties together, it’s often more convenient to use the text-decoration shorthand property, which combines text-decoration-line, text-decoration-color, and text-decoration-style into a single declaration.

Specification

The text-decoration-line property is defined in the CSS Text Decoration Module Level 3 specification. This specification outlines the behavior and available values for text decoration properties, ensuring consistency across different web browsers.

The official specification can be found at [CSS Text Decoration Module Level 3]WebsiteUrl.

Syntax

The syntax for the text-decoration-line property is straightforward. It can take single or multiple keyword values, each specifying a different type of text decoration.

/* Single keyword */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/* Multiple keywords */
text-decoration-line: underline overline;
text-decoration-line: overline underline line-through;

/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

Explanation of Keywords

• none: No text decoration is applied.
• underline: Adds a line beneath the text.
• overline: Adds a line above the text.
• line-through: Adds a line through the middle of the text.
• blink: The text alternates between visible and invisible. Note that this value is deprecated and not supported by all browsers.

Global Values

• inherit: The element inherits the text decoration from its parent element.
• initial: Sets the property to its default value (none).
• revert: Resets the property to the browser’s default value.
• revert-layer: Resets the property to the value established by the user-agent stylesheet for the document language.
• unset: Resets the property to its natural value, which means it behaves as if the property is not set.

Values

The text-decoration-line property accepts several values that define the type of decoration applied to the text. These values can be used individually or combined.

none

• Description: Produces no text decoration.
• Example:

  text-decoration-line: none;

underline

• Description: Adds a decorative line beneath the text.
• Example:

  text-decoration-line: underline;

overline

• Description: Adds a decorative line above the text.
• Example:

  text-decoration-line: overline;

line-through

• Description: Adds a decorative line going through the middle of the text.
• Example:

  text-decoration-line: line-through;

blink

• Description: The text alternates between visible and invisible.
• Example:

  text-decoration-line: blink;

Combining Values

You can combine multiple values to apply more than one type of text decoration simultaneously. For example:

• Example:

  text-decoration-line: underline overline;
  text-decoration-line: overline underline line-through;

Global Values

• inherit: The element inherits the text decoration from its parent element.

  text-decoration-line: inherit;

• initial: Sets the property to its default value (none).

  text-decoration-line: initial;

• revert: Resets the property to the browser’s default value.

  text-decoration-line: revert;

• revert-layer: Resets the property to the value established by the user-agent stylesheet for the document language.

  text-decoration-line: revert-layer;

• unset: Resets the property to its natural value.

  text-decoration-line: unset;

Formal Definition

The text-decoration-line property is a fundamental part of the CSS Text Decoration Module. It is used to specify the type of line decoration applied to text elements.

Formal Syntax

The formal syntax for the text-decoration-line property is defined as follows:

text-decoration-line = none | underline | overline | line-through | blink

Explanation:

• none: No text decoration is applied.
• underline: A line is added beneath the text.
• overline: A line is added above the text.
• line-through: A line is drawn through the middle of the text.
• blink: The text alternates between visible and invisible. Note that this value is deprecated and not supported by all browsers.

Global Values

In addition to the specific text decoration values, the text-decoration-line property also accepts global values that control the inheritance and resetting behavior of the property:

• inherit: The element inherits the text decoration from its parent element.
• initial: Sets the property to its default value (none).
• revert: Resets the property to the browser’s default value.
• revert-layer: Resets the property to the value established by the user-agent stylesheet for the document language.
• unset: Resets the property to its natural value.

Example of Formal Usage

Here is an example demonstrating the formal usage of the text-decoration-line property:

p {
  text-decoration-line: underline;
}

span {
  text-decoration-line: line-through;
}

div {
  text-decoration-line: overline;
}

In this example:

• The paragraph (p) element will have an underline.
• The span (span) element will have a line-through.
• The division (div) element will have an overline.

Examples

Basic Text Decorations

This example demonstrates the use of basic text decorations such as underline, overline, and line-through.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Basic Text Decorations</title>
    <style>
        .underline {
            text-decoration-line: underline;
        }
        .overline {
            text-decoration-line: overline;
        }
        .line-through {
            text-decoration-line: line-through;
        }
    </style>
</head>
<body>
    <p class="underline">This text has an underline.</p>
    <p class="overline">This text has an overline.</p>
    <p class="line-through">This text has a line-through.</p>
</body>
</html>

Output:

• The text in the first paragraph will have an underline.
• The text in the second paragraph will have an overline.
• The text in the third paragraph will have a line-through.

Combined Text Decorations

This example combines multiple text decorations to create more complex visual effects.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Combined Text Decorations</title>
    <style>
        .combined {
            text-decoration-line: underline overline line-through;
        }
    </style>
</head>
<body>
    <p class="combined">This text has underline, overline, and line-through.</p>
</body>
</html>

Output:

• The text in the paragraph will have an underline, overline, and line-through simultaneously.

Customizing Text Decoration with Other Properties

This example combines text-decoration-line with other text decoration properties to create more refined styles.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Custom Text Decorations</title>
    <style>
        .custom {
            text-decoration-line: underline;
            text-decoration-style: wavy;
            text-decoration-color: red;
        }
    </style>
</head>
<body>
    <p class="custom">This text has a wavy red underline.</p>
</body>
</html>

Output:

• The text in the paragraph will have a wavy red underline.

Using Global Values

This example demonstrates the use of global values such as inherit, initial, and unset.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Global Values</title>
    <style>
        .parent {
            text-decoration-line: underline;
        }
        .child {
            text-decoration-line: inherit;
        }
        .reset {
            text-decoration-line: initial;
        }
        .unset {
            text-decoration-line: unset;
        }
    </style>
</head>
<body>
    <div class="parent">
        <p>This text has an underline.</p>
        <p class="child">This text inherits the underline from its parent.</p>
    </div>
    <p class="reset">This text has the default decoration (none).</p>
    <p class="unset">This text resets the decoration to its natural value.</p>
</body>
</html>

Output:

• The text in the first paragraph will have an underline.
• The text in the second paragraph will inherit the underline from its parent.
• The text in the third paragraph will have no decoration (default value).
• The text in the fourth paragraph will reset the decoration to its natural value.

Browser Compatibility

Ensuring that your web designs are compatible across different browsers is crucial for a consistent user experience. The text-decoration-line property is widely supported by modern web browsers, making it a reliable choice for adding text decorations to your web pages.

Supported Browsers

• Google Chrome: 57.0+
• Microsoft Edge: 79.0+
• Mozilla Firefox: 36.0+
• Apple Safari: 7.1+
• Opera: 44.0+

Compatibility Table

Ensuring Cross-Browser Compatibility

While the text-decoration-line property is well-supported across modern browsers, it’s always a good practice to test your web pages on multiple browsers to ensure consistent rendering. Here are some tips to ensure cross-browser compatibility:

1. Use Vendor Prefixes: For older browser versions, you may need to use vendor prefixes to ensure compatibility. However, for the text-decoration-line property, vendor prefixes are generally not required.
2. Fallback Styles: Provide fallback styles for browsers that do not support the property. This can be done by using the text-decoration shorthand property, which is more widely supported.
3. Browser Testing Tools: Utilize browser testing tools like BrowserStack, CrossBrowserTesting, or similar services to test your web pages on different browsers and operating systems.
4. Polyfills and Shims: If you need to support older browsers that do not support the text-decoration-line property, consider using polyfills or shims to add the necessary functionality.

By following these best practices, you can ensure that your web designs look great and function consistently across all platforms.

Related Properties

When working with the text-decoration-line property, you might also find the following related properties useful for further customizing your text decorations:

text-decoration

The text-decoration property is a shorthand property that combines text-decoration-line, text-decoration-color, and text-decoration-style into a single declaration. This makes it easier to define multiple aspects of text decoration in one line of code.

Syntax:

text-decoration: line color style;

Example:

p {
  text-decoration: underline red wavy;
}

text-decoration-color

The text-decoration-color property specifies the color of the text decoration. This can be used to change the color of the underline, overline, or line-through.

Syntax:

text-decoration-color: color;

Example:

p {
  text-decoration-line: underline;
  text-decoration-color: blue;
}

text-decoration-style

The text-decoration-style property specifies the style of the text decoration. This can be used to change the appearance of the underline, overline, or line-through.

Syntax:

text-decoration-style: style;

Values:

• solid: A single solid line.
• double: Two solid lines.
• dotted: A series of dots.
• dashed: A series of short dashes.
• wavy: A wavy line.

Example:

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

text-decoration-thickness

The text-decoration-thickness property specifies the thickness of the text decoration line. This can be used to make the underline, overline, or line-through thicker or thinner.

Syntax:

text-decoration-thickness: thickness;

Example:

p {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}

text-underline-offset

The text-underline-offset property specifies the offset of the underline from the text. This can be used to adjust the position of the underline relative to the text.

Syntax:

text-underline-offset: offset;

Example:

p {
  text-decoration-line: underline;
  text-underline-offset: 5px;
}

FAQs

What does the text-decoration-line property in CSS define?

The text-decoration-line property in CSS specifies which line decorations are applied to the text, such as underline, overline, line-through, or a combination of these.

How can I apply both underline and line-through to text?

To apply both underline and line-through, use: text-decoration-line: underline line-through;.

What values are available for text-decoration-line?

The text-decoration-line property values include none, underline, overline, line-through, and blink (deprecated). Multiple values can be combined.

Can text-decoration-line be animated?

No, text-decoration-line itself is not directly animatable, but you can create animations by transitioning between styles that include different text-decoration values.

Does text-decoration-line apply to all child elements?

text-decoration-line applies to the text content of the element and may affect child elements depending on their styling. However, specific child elements can override this property.

What is the default value for text-decoration-line?

The default value for text-decoration-line is none, which means no text decoration is applied.

How can I reset the text-decoration-line property to its default value?

You can reset the text-decoration-line property to its default value using text-decoration-line: initial;.

Can I use text-decoration-line with other text decoration properties?

Yes, you can use text-decoration-line with other text decoration properties such as text-decoration-color, text-decoration-style, and text-decoration-thickness. For convenience, you can use the shorthand property text-decoration to combine these properties.

What is the blink value for text-decoration-line?

The blink value for text-decoration-line makes the text alternate between visible and invisible. However, this value is deprecated and not supported by all user agents. It is recommended to use CSS animations for blinking effects instead.

How can I ensure cross-browser compatibility for text-decoration-line?

To ensure cross-browser compatibility, test your web pages on multiple browsers and use fallback styles if necessary. Additionally, consider using browser testing tools and polyfills for older browsers. The text-decoration-line property is widely supported by modern browsers, including Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari, and Opera.