The text-decoration property is a shorthand for specifying the appearance of decorative lines on text. It combines text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness into a single declaration.
Example 1: Underlining Text
/* This rule targets any element with the class "underline-text" */
.underline-text {
text-decoration: underline; /* Adds a line underneath the text */
}
Explanation: The text-decoration: underline; declaration adds a horizontal line directly beneath the text. This is commonly used to indicate a hyperlink or to add emphasis.
Example 2: Overlining Text
/* This rule applies to elements with the class "overline-text" */
.overline-text {
text-decoration: overline; /* Adds a line above the text */
}
Explanation: text-decoration: overline; places a decorative line on top of the text. This is a less common decoration, used for specific design effects.
Example 3: Striking Through Text
/* This CSS rule is for any element with the class "strikethrough-text" */
.strikethrough-text {
text-decoration: line-through; /* Draws a line through the middle of the text */
}
Explanation: The text-decoration: line-through; value draws a line directly through the center of the text. This is often used to indicate that text has been deleted or is no longer relevant.
Example 4: Combining Decorations with Color and Style
/* This rule targets elements with the class "fancy-decoration" */
.fancy-decoration {
text-decoration: underline dotted red; /* Underline, dotted style, red color */
}
Explanation: The text-decoration shorthand allows for combining multiple values. In this example, underline dotted red creates a red, dotted line underneath the text, demonstrating how to specify the line's style and color.
Example 5: Wavy Underline
/* This rule is for any element with the class "wavy-underline" */
.wavy-underline {
text-decoration: underline wavy blue; /* Creates a wavy blue underline */
}
Explanation: By using the wavy keyword, you can create a wavy line for the text decoration. This example applies a blue, wavy underline, which is often used to indicate spelling or grammar errors in text editors.
Example 6: Changing Decoration Thickness
/* This CSS rule targets elements with the class "thick-decoration" */
.thick-decoration {
text-decoration: underline solid green 3px; /* Green, solid underline that is 3 pixels thick */
}
Explanation: You can control the thickness of the decoration line by adding a length value. Here, 3px sets the thickness of the solid green underline, making it more prominent.
Example 7: Removing Text Decoration
/* This rule applies to anchor tags with the class "no-decoration" */
a.no-decoration {
text-decoration: none; /* Removes any text decoration */
}
Explanation: The text-decoration: none; declaration is commonly used to remove the default underline from hyperlinks (<a> tags) for stylistic purposes, creating a cleaner look for navigation menus and other links.