The underline text-decoration attribute in CSS uses the advanced

Definitions and usage

Text-decoration attributes are added to the text's adornments.

Note: The decorated color is set by the "Color" property.

Description

This property allows you to set an effect on the text, such as underlining. If the descendant elements do not have their own decorations, the decorations set on the ancestor elements are "extended" to the descendant elements. The user agent is not required to support blink.

Default value: None

Inheritance: No

Possible values

None default. Defines the standard text.

Underline defines a line under the text.

Overline defines a line on the text.

Line-through defines a line that crosses the text.

Blink defines the blinking text.

Inherit specify that the value of the Text-decoration attribute should be inherited from the parent element.

Instance

To set the text decoration for H1, H2, H3, H4 elements:

h1 {Text-decoration:overline}

h2 {Text-decoration:line-through}

h3 {Text-decoration:underline}

h4 {Text-decoration:blink}

Advanced

Text can have more decorations

For example:

CSS code copy content to clipboard

A

Text-decoration:underline overline;

}

You can see the content text-decoration decorated in almanac, and more specifically, it adds multiple property values to the Child property text-decoration-line.

Change the color of the decoration

The underline color defaults to the text setting color's property value, but you can change:

CSS code copy content to clipboard

A

Text-decoration-color: #f06d06;

}

Observe the content Text-decoration-color modified in Almanac.

Note that the underline in the gecko is rendered below the font, whereas the underline in the Webkit/blink is rendered above the font:

Now processing color underlines generally use border instead of text-decoration. The border can control the color, width, and position of the underline more independently than the text-decoration.

But there are some things border can't do, just like ...

Change the style of decoration

Border can't implement the following style!

CSS code copy content to clipboard

A

Text-decoration-style:wavy;

}

Observe the content Text-decoration-style in almanac.

It's going to get better.

There are many ways to better implement underlined text today. For example, using skip can improve readability, just like the following:

The example above is implemented with Text-decoration-skip, but not all browsers support it. At the same time, it may be better to use a looser underline and reduce the value of contrast-y, where RGBA () is used:

A hidden underline is just a function of its (text-decoration), and you can also use skip to modify some inline elements, spaces, and even control edges.

It is worth noting that the Safari/ios browser appears to use the default skip value.