CSS Text Decoration

In CSS, the text-decoration property is used to add decorative styles to text, such as underlines, overlines, line-throughs, and more. The text-decoration property can take one or more values to apply different text decorations. Here are the possible values for the text-decoration property:

• none This value indicates that no text decoration should be applied to the text. It removes any existing underlines, overlines, or line-throughs.
• underline This value adds a line below the text, creating an underline effect.
• overline This value adds a line above the text, creating an overline effect.
• line-through This value adds a line through the middle of the text, striking it out, creating a line-through effect.
• blink This value is a non-standard value and is not widely supported. It creates a blinking or flashing effect on the text.

Here's an example of using the text-decoration property:

        
            a {
   text-decoration: underline;
}

p {
   text-decoration: line-through;
}
        
    

In this example, the text-decoration property is used to add an underline to all anchor (<a>) elements and a line-through to all paragraph (<p>) elements.

Additionally, you can combine multiple text decorations if needed. For example:

        
            h1 {
    text-decoration: underline overline;
}
        
    

In this case, the h1 element will have both an underline and an overline applied to the text.

The text-decoration property can also be used to specify the color, style, and thickness of the decorative lines. For example, to add a red, dashed underline to text, you would use the following code:

        
            h1 {
    text-decoration: underline dashed red;
}
        
    

Individual Text Decoration Properties

• text-decoration-line Specifies the type or style of the text decoration, such as underline, overline, line-through, or blink.
• text-decoration-color Sets the color of the text decoration line.
• text-decoration-style Determines the style of the text decoration line, such as solid, dashed, dotted, wavy, or double.
• text-decoration-thickness Controls the thickness of the text decoration line (although this property has limited browser support).

        
            h1 {
  text-decoration-line: underline;
  text-decoration-color: blue;
  text-decoration-style: dashed;
  text-decoration-thickness: 2px;
}

p {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 3px;
}

a {
  text-decoration-line: overline;
  text-decoration-color: green;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
}