Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.