Open In App

CSS text-decoration Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In CSS, text-decoration property controls the decoration of text, such as underlines, overlines, line-throughs, and blink effects. It accepts values like none, underline, overline, line-through, and inherit to style text decorations accordingly.

Syntax:

text-decoration: line style color | initial | inherit;
/* for example
text-decoration: underline dashed green;
*/

CSS text-decoration shorthand property for:

CSS text-decoration Property Examples:

Example 1: Here is the 3 value representation of CSS text-decoration Property.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Text Decoration Example</title>
    <style>
        h2{
            text-decoration: underline dashed green;
        }
    </style>
</head>
<body>
    <h2>
        Text Decoration Example
    </h2>
    
</body>
</html>


Output:

text-decoration-multivalue-example

CSS text-decoration Property

Example 2: Here is the single value representation of CSS text-decoration Property.

Javascript




<!DOCTYPE html>
<html>
    <head>
        <title>Text Decoration Example</title>
        <style>
            h2 {
                text-decoration-line: overline;
                text-decoration-style: solid;
                text-decoration-color: blue;
            }
        </style>
    </head>
    <body>
        <h2>Text Decoration Example</h2>
    </body>
</html>


Output:

text-decoration-single-value-example

CSS Text-Decoration Single value Example

CSS text-decoration Property Use Cases

1. How to Style the Text using text-decoration Property in CSS ?

In CSS, use the text-decoration property to style text with decorations like underline, overline, line-through, or a combination. Set values to control appearance.

2. Which property is used to underline, overline, and strikethrough text using CSS ?

The text-decoration-line property in CSS is used to underline, overline, and strikethrough text by specifying values like underline, overline, and line-through.

3. How to decorate the Text in CSS ?

To decorate text in CSS, use the text-decoration property. Set values such as underline, overline, line-through, or a combination to add visual enhancements.

4. How to remove underline for anchors tag using CSS?

To remove underline for anchor tags in CSS, use text-decoration: none; applied to the anchor selector (`a`), ensuring links appear without underlines.

5. How to change the underline color in CSS?

To change the underline color in CSS, use the `text-decoration-color` property, specifying a color value such as named colors, hexadecimal codes, or RGB values for the underline.

Supported Browsers:

The browser supported by value attribute in option tag are listed below:



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads