How to underline text in CSS?

CSS Text-decoration property: -

Underlines can be used to highlight important text. The U element and the CSS text-decoration property are the two most used techniques to underline text on web pages.

Both are straightforward to utilize, but the U element offers semantic value to the meaning. Another can be displayed on demand, making it simple to change the underline state by simply adding CSS classes to the text.

Whether or not underlines are useful for expressing meaning or accessibility is a matter of debate. Underlines are a natural approach to offer greater user experience value when color alone isn't enough to express meaning.

The text-decoration attribute offers an alternative way to underline text. The hyperlinked text can also be used to replace underlines with overlines.

An overline is the opposite of underlining. A line is added to the top of the text.

We may utilize all underline and overline values for the same class definition. The text-decoration property governs how the text is presented in several ways. When text-decoration is set to underline, the text inside the component is underlined.

Text decoration CSS properties are fantastic for text, but they can be constrained in terms of design and aren't applicable to non-text content types. Underlines can also be created with CSS border attributes.

The text-decoration attribute is the most basic way to underline text. The most significant disadvantage of text decoration is that it is not configurable.

The text-decoration property uses underlining, overline, line-through, or a combination of lines to highlight selected text.

The content is underlined using the text-decoration-line attribute. Overline, underline, and line-through are the three options for this attribute. In CSS, the attribute underline is used to highlight the text. The underlining is drawn below the inline text with this value.

Across descendant text elements, text decorations are drawn. That implies that when an element defines a text decoration, the decoration cannot be removed by a child element.

There is no line drawn, and any existing decorations are deleted.

Underline: a 1px line is drawn across the text's baseline.

Line-through: at the text's "middle" point, inserts a 1px line across it.

Overline: adds a 1px line directly above the text's "top" point across the text.

Inherit: inherits the parent's decoration.

Text decoration is specified through the text-decoration property, which is a shorthand characteristic for:

text-decoration-line (required)
text-decoration-color
text-decoration-style
text-decoration-thickness

overline, underline, underline-overline, line-through comes under text-decoration-line.

Solid, dotted, dashed, wavy, double comes under text-decoration-style.

Color in decimal value, hexadecimal value or inherit comes under text-decoration-color.

The border-bottom property is an alternative to text decoration. We can also use border-bottom to provide padding.

Syntax: -

text-decoration: text-decoration-line | text-decoration-color | text-decoration-style | text-decoration-thickness 

Let's now look for an example and understand the usage of text-decoration property.

Text-decoration: underline overline

Example: -

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: underline overline dotted purple;
}
h3 {
  text-decoration: underline wavy cyan 10px;}
</style>
</head>
<body>
<h1>This is an example of text decoration property underline overline</h1>
<h3>This is an example of text decoration property underline</h3>
</body>
</html>

Output:

The above example is use for demonstrating the use of text-decoration property using underline, underline overline.

Text-decoration: underline

Example: -

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration-line: underline;
}
</style>
</head>
<body>
<h1>This is an example of text decoration property underline </h1>
</body>
</html>

Output:

In the above example, the use of underline in text-decoration property is shown.

Text-decoration: line-through

Example: -

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
  text-decoration: line-through;
}
</style>
</head>
<body>
<h2>This is an example of text decoration property line-through </h2>
</body>
</html>

Output:

Text-decoration-color

Example: -

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: underline wavy;
	text-decoration-color: cyan;
}
h2 {
text-decoration: underline;
	text-decoration-color: #DF5689;
}
h3 {
text-decoration: line-through;
	text-decoration-color: rgb(105,42,49);
font-size:30px;
}
</style>
</head>
<body>
<h1>This is an example of text decoration property color using underline wavy. </h1>
<h2>This is an example of text decoration property color using underline overline. </h2>
<h3>This is an example of text decoration property color using line-through. </h3>
</body>
</html>

Output:

Text-decoration-style

Example: -

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration-style: solid ;
	text-decoration: underline blue;
}
h2 {
text-decoration: underline;
	text-decoration-color: #DF5689;
text-decoration-style: double;
}
h3 {
text-decoration: underline;
	text-decoration-color: rgb(105,42,49);
font-size:30px;
text-decoration-style: dotted;
}
</style>
</head>
<body>
<h1>This is an example of text decoration property color using underline wavy. </h1>
<h2>This is an example of text decoration property color using underline overline. </h2>
<h3>This is an example of text decoration property color using line-through. </h3>
</body>
</html>

Output: