CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS provides a wide range of properties to style the text and other elements of a web page. One such property is text-decoration-line, which is used to specify the type of line to be used for text decoration.
The text-decoration-line property is used to specify the type of line to be used for text decoration. Text decoration is used to add visual effects to the text, such as underlining, overlining, striking through, etc. The text-decoration-line property can take one of the following values:
none: No line is used for text decoration.underline: A line is drawn under the text.overline: A line is drawn over the text.line-through: A line is drawn through the text.underline overline: Both underline and overline are used for text decoration.underline line-through: Both underline and line-through are used for text decoration.overline line-through: Both overline and line-through are used for text decoration.underline overline line-through: All three lines are used for text decoration.The text-decoration-line property can be used with the text-decoration-color and text-decoration-style properties to further customize the text decoration.
Let's take a look at some code examples to understand how the text-decoration-line property works:
The following code adds an underline to the text:
<p style="text-decoration-line: underline;">This text is underlined.</p>
Output:
This text is underlined.
The following code adds an overline to the text:
<p style="text-decoration-line: overline;">This text is overlined.</p>
Output:
This text is overlined.
The following code adds a line through the text:
<p style="text-decoration-line: line-through;">This text has a line through it.</p>
Output:
This text has a line through it.
The following code adds both underline and overline to the text:
<p style="text-decoration-line: underline overline;">This text has both underline and overline.</p>
Output:
This text has both underline and overline.
The following code adds a custom color and style to the text decoration:
<p style="text-decoration-line: underline; text-decoration-color: red; text-decoration-style: dotted;">This text has a red dotted underline.</p>
Output:
This text has a red dotted underline.