CSS text-decoration Property Use Cases
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.
The text-decoration-line property in CSS is used to underline, overline, and strikethrough text by specifying values like underline, overline, and line-through.
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.
To remove underline for anchor tags in CSS, use text-decoration: none; applied to the anchor selector (`a`), ensuring links appear without underlines.
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:
CSS text-decoration Property
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:
- text-decoration-line : use to sets the type of line decoration for our text.
- text-decoration-color : use to sets the color for the line decoration.
- text-decoration-style : use to sets the style of the line specified by text-decoration-line.
- text-decoration-thickness : use to sets the thickness of the line used in decoration.
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:
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: