Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Which property is used to underline, overline, and strikethrough text using CSS?
In CSS, the text-decoration property is used to underline, overline, and strikethrough the text.
Underlining the text means drawing a line below the text, and overlining the text means drawing a line above the text. Striking through the text means drawing a line on the text to show text is crossed out or erased.
In this tutorial, we will learn to use the different values of the text-decoration CSS property to style text differently.
Syntax
text-decoration: decoration-line decoration-style decoration-color decoration-thickness;
Possible Values
| Property | Values | Description |
|---|---|---|
decoration-line |
underline, overline, line-through | Type of decoration |
decoration-style |
solid, dotted, dashed, wavy | Style of the decoration line |
decoration-color |
color values | Color of the decoration line |
decoration-thickness |
px, em, % | Thickness of the decoration line |
Example 1: Underline Text
In the example below, we have used the text-decoration CSS property to underline text with a solid red line
<!DOCTYPE html>
<html>
<head>
<style>
.underlined {
font-size: 1.2rem;
text-decoration: solid underline red 3px;
}
</style>
</head>
<body>
<h3>Setting underline to text using text-decoration</h3>
<div class="underlined">
This is a text with an underline.
</div>
</body>
</html>
A heading followed by text with a solid red underline (3px thick) appears on the page.
Example 2: Overline Text
In the example below, we have decorated the text using a wavy overline of blue color
<!DOCTYPE html>
<html>
<head>
<style>
.overlined {
font-size: 1.2rem;
text-decoration: wavy overline blue 3px;
}
</style>
</head>
<body>
<h3>Setting overline to text using text-decoration</h3>
<div class="overlined">
This is a text with an overline.
</div>
</body>
</html>
A heading followed by text with a wavy blue line above it (3px thick) appears on the page.
Example 3: Strikethrough Text
In this example, we have used the text-decoration CSS property with the line-through value to strikethrough the text
<!DOCTYPE html>
<html>
<head>
<style>
.strikethrough {
font-size: 1.2rem;
text-decoration: dotted line-through green 3px;
}
</style>
</head>
<body>
<h3>Setting strikethrough to text using text-decoration</h3>
<div class="strikethrough">
This is a text with a strikethrough.
</div>
</body>
</html>
A heading followed by text with a dotted green line through it (3px thick) appears on the page.
Example 4: Comparing All Decoration Types
In this example, we have created three different div elements to demonstrate the difference between underline, overline, and line-through text decoration styles
<!DOCTYPE html>
<html>
<head>
<style>
.decoration {
font-size: 1.5rem;
margin: 10px 0;
}
.underline {
text-decoration: solid underline orange 2px;
}
.overline {
text-decoration: solid overline orange 2px;
}
.strikethrough {
text-decoration: solid line-through orange 2px;
}
</style>
</head>
<body>
<h3>Comparing text decoration styles</h3>
<div class="decoration underline">Text with underline</div>
<div class="decoration overline">Text with overline</div>
<div class="decoration strikethrough">Text with strikethrough</div>
</body>
</html>
Three lines of text are displayed: one with an orange line below (underline), one with an orange line above (overline), and one with an orange line through it (strikethrough).
Conclusion
The text-decoration property is a powerful tool for adding visual emphasis to text. You can combine different line types, styles, colors, and thicknesses to create various text effects according to your design requirements.
459 Views
