The text-decoration property in CSS is used to add various visual decorations to text, such as underlining, overlining, strikethrough, or even a combination of these. It's a shorthand property that allows you to set multiple text-decoration-related properties in one go.
Properties of text-decoration
1. text-decoration-line: Specifies what kind of line decoration you want to apply to the text. The possible values are:
· underline: Adds a line beneath the text.
· overline: Adds a line above the text.
· line-through: Adds a line through the text (strikethrough).
· none: Removes any text decoration.
2. text-decoration-style: Defines the style of the text decoration. The possible values are:
· solid: A solid line.
· double: A double line.
· dotted: A dotted line.
· dashed: A dashed line.
· wavy: A wavy line.
text-decoration-color: Specifies the color of the text decoration (underline, overline, or line-through). It can take any valid CSS color value.
text-decoration-thickness: Controls the thickness of the text decoration line. It can take values such as auto, from-font, or a length value (e.g., 2px).
Example
text-decoration: underline dotted red 2px;
textDecoration.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Decoration Order Example</title> <style> .underline { text-decoration: underline; } .overline { text-decoration: overline; } .line-through { text-decoration: line-through; } .custom-decoration { text-decoration: underline wavy red 6px; } p{ font-size: 2em; } </style> </head> <body> <p> This is an example of <span class="underline">underlined text</span>, <span class="overline">overlined text</span>, and <span class="line-through">strikethrough text</span>. </p> <p> Here is a more customized decoration: <span class="custom-decoration">wavy, red, 6px thick underline</span>. </p> </body> </html>
When using the text-decoration shorthand property, it's best to follow the recommended order of text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness for clarity and to avoid potential issues. This way, you can create clear, visually appealing text decorations in your CSS.
No comments:
Post a Comment