Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 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: style decoration color thickness;
Values
Style – It represents the style of the decorated line, such as solid, dotted, wavy, etc.
Decoration - It can decorate the text with ‘underline’, ‘overline’, and ‘line-through’ values.
Color – It sets the color for the decorated line.
Thickness – It is used to set the thickness of the decorated line.
Example
In the example below, we have used the ‘text-decoration’ CSS property to decorate the text. We have set the ‘solid’ line style, ‘underline’ decoration of red color and 5px thickness which users can observe in the output.
<html>
<head>
<style>
.text {
font-size: 1.2rem;
text-decoration: solid underline red 5px;
}
</style>
</head>
<body>
<h3> Setting the underline to the text using the 'text-decoration' property in CSS </h3>
<div class = "text">
This is a text with an underline.
</div>
</body>
</html>
Example
In the example below, we have decorated the text using the way overline of the blue color. In the output, users can observe the blue line above the text.
<html>
<head>
<style>
.text {
font-size: 1.2rem;
text-decoration: wavy overline blue 5px;
}
</style>
</head>
<body>
<h3> Setting the <i> overline to the text </i> using the 'textdecoration' property in CSS </h3>
<div class = "text">
This is a text with an overline.
</div>
</body>
</html>
Example
In this example, we have used the ‘text-decoration’ CSS property with the ‘line-through’ value to strikethrough the texts. In the output, users can observe the line above the text. In this way, we can show that there is an error in the text without removing the text.
<html>
<head>
<style>
.text {
font-size: 2rem;
text-decoration: dotted line-through green 5px;
}
</style>
</head>
<body>
<h3> Setting the <i> strickthrough to the text </i> using the 'textdecoration' property in CSS </h3>
<div class = "text">
This is a text with a strikethrough.
</div>
</body>
</html>
Example
In this example, we have created three different div elements with different texts. We have used the different decoration styles for the text of every div element. In the output, users can observe the difference between the ‘underline’, ‘overline’, and ‘line-through’ text decoration styles.
<html>
<head>
<style>
.underline {
color: grey;
text-decoration: solid underline yellow 2px;
font-size: 1.5rem;
}
.overline {
text-decoration: solid overline yellow 3px;
font-size: 1.5rem;
}
.strikethrough {
text-decoration: solid line-through yellow 2px;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h3> Setting the strikethrough, underline, and overline to the text using the 'text-decoration' property in CSS </h3>
<div class = "underline"> underline </div>
<div class = "overline"> overline </div>
<div class = "strikethrough"> strike through </div>
</body>
</html>
Conclusion
This tutorial taught user how to decorate the texts using the ‘text-decoration’ CSS property. Users can use the different values to decorate the texts differently according to the requirements.
177 Views
To Continue Learning Please Login