The text-decoration Property in CSS

The text-decoration property in CSS is used to style text decorations, such as underlines, overlines, and strikethroughs. This property allows you to apply various visual effects to text, enhancing its appearance or indicating certain statuses, like links or deletions.

Values of text-decoration

1. none

   • Description: Removes any text decorations applied to the text. This is the default value.
   • Example:

     .no-decoration {
       text-decoration: none; /* No text decorations applied */
     }
     

2. underline

   • Description: Adds a line below the text. Commonly used to indicate hyperlinks.
   • Example:

     .underline {
       text-decoration: underline; /* Adds a line below the text */
     }
     

3. overline

   • Description: Adds a line above the text. Less common but can be used for specific design purposes.
   • Example:

     .overline {
       text-decoration: overline; /* Adds a line above the text */
     }
     

4. line-through

   • Description: Adds a line through the text. Often used to indicate that text has been removed or is no longer valid.
   • Example:

     .line-through {
       text-decoration: line-through; /* Adds a line through the text */
     }
     

5. blink (deprecated)

   • Description: Makes the text blink on and off. This value is not widely supported and is considered deprecated.
   • Example:

     .blink {
       text-decoration: blink; /* Text blinks on and off (deprecated) */
     }
     

Text Decoration Shorthand

The text-decoration property is a shorthand for setting multiple text decoration properties at once, including:

• text-decoration-color: Specifies the color of the text decoration.
• text-decoration-line: Specifies the type of text decoration (e.g., underline, overline, line-through).
• text-decoration-style: Specifies the style of the text decoration (e.g., solid, dotted, dashed).

Example of shorthand usage:

.decorated-text {
  text-decoration: underline overline; /* Combines underline and overline decorations */
  text-decoration-color: red; /* Sets the color of the decorations */
  text-decoration-style: dashed; /* Sets the style of the decorations */
}

Examples

1. Underline Decoration

   .underline-text {
     text-decoration: underline; /* Adds an underline to the text */
   }
   

2. Overline Decoration

   .overline-text {
     text-decoration: overline; /* Adds an overline to the text */
   }
   

3. Line-through Decoration

   .line-through-text {
     text-decoration: line-through; /* Adds a strikethrough to the text */
   }
   

4. Combined Decorations

   .combined-decoration {
     text-decoration: underline line-through; /* Combines underline and strikethrough */
   }
   

Explanation

• none: Removes all text decorations, returning the text to its default style.
• underline: Adds a line below the text, which is useful for indicating clickable links or emphasizing text.
• overline: Adds a line above the text, which can be used for special emphasis or design.
• line-through: Adds a line through the text to show that it has been deleted or is no longer valid.
• blink: Although intended to make text blink, it is deprecated and not recommended for use due to poor support and accessibility issues.

Use Cases

• Links: Use underline for hyperlinks to indicate interactivity.
• Emphasis: Apply overline or line-through for emphasis or visual cues.
• Design: Combine different text decorations to achieve specific design effects.