How to use the text-decoration-line attribute in css
Editor to share with you how to use the text-decoration-line attribute in css. I hope you will get something after reading this article. Let's discuss it together.
Definition and usage of text-decoration-line attribute
In css, the text-decoration-line property is used to specify the type of line to be used for text decoration, and you can use the text-decoration property if you need to set the values of the text-decoration-line, text-decoration-style, and text-decoration-color properties at the same time. The text-decoration attribute can define these three properties in a declaration. The text-decoration-line property supports multiple attribute values, such as using underline and overline (text-decoration-line:underlineoverline;) to display lines above and below the text.
The text-decoration-line attribute is a new property in css3, which is not currently supported by mainstream browsers, but Firefox browsers support another attribute that can replace it (the-moz-text-decoration-line attribute).
Text-decoration-line attribute syntax format
Css syntax: text-decoration-line:none/underline/overline/line-through/initial/inherit
JavaScript syntax: object.style.textDecorationLine= "overline"
Attribute value description
None: default value, which specifies that the text decoration has no lines
Underline: a line appears at the bottom of the specified text
Overline: specifies that a line will be displayed above the text
Line-through: specifies that a line will be displayed in the middle of the text
Initial: set this property to its default value
Inherit: inherits the value of the text-decoration-line attribute from the parent element
Case study
Csstext-decoration-line attribute text decorated line type
P {text-decoration:underline;}
# p1 {text-decoration-line:overline;-moz-text-decoration-line:overline;}
# p2 {text-decoration-line:underline;-moz-text-decoration-line:underline;}
# p3 {text-decoration-line:line-through;-moz-text-decoration-line:line-through;}
# p4 {text-decoration-line:overlineunderline;-moz-text-decoration-line:overlineunderline;}
Text-decoration-line property Demo 1
Text-decoration-line property Demo 2
Text-decoration-line property Demo 3
Text-decoration-line property demo 4
After reading this article, I believe you have a certain understanding of "how to use the text-decoration-line attribute in css". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!
