YouTip

## CSS text-decoration-line Property The `text-decoration-line` property in CSS specifies the type of decoration line (such as an underline, overline, or line-through) that is added to the text. This property is part of the CSS Text Decoration Module and is commonly used in conjunction with `text-decoration-color` and `text-decoration-style`. --- ## Definition and Usage The `text-decoration-line` property defines the kind of line used for text decoration. * **Shorthand Property:** You can also set this value using the `text-decoration` shorthand property. `text-decoration` is a shorthand for `text-decoration-line`, `text-decoration-style`, and `text-decoration-color`. * **Multiple Values:** You can apply multiple values at the same time (e.g., both `underline` and `overline`) to display lines both above and below the text. ### Property Specifications | Feature | Description | | :--- | :--- | | **Default Value:** | `none` | | **Inherited:** | No | | **Animatable:** | No (See (css-animatable.html)) | | **CSS Version:** | CSS3 | | **JavaScript Syntax:** | `object.style.textDecorationLine = "overline"` | --- ## Syntax ```css text-decoration-line: none | underline | overline | line-through | initial | inherit; ``` ### Multiple Values Syntax You can combine multiple values by separating them with a space: ```css text-decoration-line: underline overline; ``` --- ## Property Values | Value | Description | | :--- | :--- | | `none` | **Default**. Specifies that no line will be added to the text decoration. | | `underline` | Specifies that a line will be displayed beneath the text. | | `overline` | Specifies that a line will be displayed above the text. | | `line-through` | Specifies that a line will be displayed through the middle of the text (strikethrough). | | `initial` | Sets this property to its default value (`none`). | | `inherit` | Inherits this property from its parent element. | --- ## Code Examples ### Example 1: Adding an Overline to Paragraphs This example displays a line above the text in a paragraph: ```css p { text-decoration-line: overline; -moz-text-decoration-line: overline; /* Support for older Firefox versions */ } ``` ### Example 2: Combining Multiple Lines You can combine values to create unique text decorations, such as displaying lines both above and below the text: ```css h2 { text-decoration-line: underline overline; } ``` ### Example 3: Creating a Strikethrough Effect This example draws a line directly through the middle of the text: ```css .discount-price { text-decoration-line: line-through; } ``` --- ## Browser Compatibility Modern web browsers fully support the `text-decoration-line` property. Historically, older versions of Firefox required the vendor prefix `-moz-text-decoration-line` for full compatibility, and older versions of Internet Explorer did not support this property. Today, all modern evergreen browsers (Chrome, Edge, Firefox, Safari, and Opera) support the standard `text-decoration-line` property without prefixes.