CSS Text-decoration property: -
Underlines are commonly employed to emphasize crucial information. The U element and the CSS text-decoration property stand out as the top two methods for adding underlines to text within web documents.
Both are easy to use, however, the U element adds semantic significance to the content. The latter can be shown when needed, allowing for easy modification of the underline status by applying CSS classes to the text.
Whether underlines are beneficial for conveying meaning or enhancing accessibility remains a topic of discussion. Utilizing underlines is an intuitive way to enhance user experience by providing additional value when color alone is insufficient for conveying meaning.
The text-decoration property provides a different method for adding a line underneath text. It can also be utilized to substitute underlines with lines above the text.
An overline serves as the converse of underlining by placing a line above the text instead of below it.
We can employ both underline and overline values within the identical class definition. The text-decoration attribute controls the presentation of text in various manners. If text-decoration is specified as underline, the text within the element will be underlined.
Text styling CSS properties offer a wide range of options for text formatting, yet they may have limitations in terms of creativity and are not suitable for non-text elements. Borders in CSS can also be used to generate underlines for text.
The text decoration property provides a fundamental method to add underlines to text. A notable limitation of text decoration is its lack of customization options.
The text-decoration property employs underlining, overline, line-through, or a mix of these lines to emphasize specific text.
The text is emphasized by applying the text-decoration-line property. Overline, underline, and line-through stand as the three choices within this property. Within CSS, the underline property serves to emphasize the text content. This specific value positions the underline beneath the text inline.
Text decorations are rendered over descendant text elements, meaning that if a particular element sets a text decoration, this decoration cannot be eliminated by a child element.
There is no boundary line visible, and all current embellishments have been removed.
Underline: A 1-pixel stroke is sketched along the baseline of the text.
Inserting a 1px line through the center of the text creates a line-through effect.
Overline: introduces a 1px line positioned directly above the uppermost point of the text spanning its entirety.
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, and line-through are all considered part of the text-decoration-line property.
Solid, dotted, dashed, wavy, and double are options for the text-decoration-style property.
Color within the text-decoration-color property can be specified using decimal value, hexadecimal value, or the keyword "inherit".
The border-bottom attribute serves as a substitute for text decoration. It is also possible to utilize the border-bottom property to add padding.
Syntax: -
text-decoration: text-decoration-line | text-decoration-color | text-decoration-style | text-decoration-thickness
Let's examine an illustration to grasp the application of the 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 example above illustrates the utilization of the text-decoration property by applying underline and overline styles.
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 example provided, the demonstration of utilizing underlines in the text-decoration property is illustrated.
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: