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
Set the kind of decoration used on text in CSS
The CSS text-decoration-line property is used to set the kind of decoration line that appears on text. This property controls whether text has an underline, overline, strikethrough, or no decoration at all.
Syntax
text-decoration-line: none|underline|overline|line-through|initial|inherit;
Possible Values
| Value | Description |
|---|---|
none |
No line for the text decoration (default) |
underline |
A line gets displayed under the text |
overline |
A line gets displayed over the text |
line-through |
A line gets displayed through the text |
Example: Overline Decoration
The following example shows how to add an overline decoration to text −
<!DOCTYPE html>
<html>
<head>
<style>
.overline-text {
text-decoration-line: overline;
text-decoration-style: solid;
text-decoration-color: blue;
font-size: 18px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Cricket Rankings</h1>
<p>The following are men's cricket rankings:</p>
<p class="overline-text">ODI Rankings</p>
</body>
</html>
A page displays with the heading "Cricket Rankings" and text "ODI Rankings" with a blue line above it.
Example: Underline Decoration
The following example demonstrates underline text decoration −
<!DOCTYPE html>
<html>
<head>
<style>
.underline-text {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: blue;
font-size: 18px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Cricket Rankings</h1>
<p>The following are men's cricket rankings:</p>
<p class="underline-text">ODI Rankings</p>
</body>
</html>
A page displays with the heading "Cricket Rankings" and text "ODI Rankings" with a blue line underneath it.
Example: Line-Through Decoration
The following example shows how to create strikethrough text using line-through decoration −
<!DOCTYPE html>
<html>
<head>
<style>
.line-through-text {
text-decoration-line: line-through;
text-decoration-style: solid;
text-decoration-color: green;
font-size: 18px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Cricket Rankings</h1>
<p>The following are men's cricket rankings:</p>
<p class="line-through-text">ODI Rankings</p>
</body>
</html>
A page displays with the heading "Cricket Rankings" and text "ODI Rankings" with a green line through the middle of it.
Example: Multiple Decoration Lines
You can combine multiple decoration values to create text with both overline and underline −
<!DOCTYPE html>
<html>
<head>
<style>
.multiple-lines {
text-decoration-line: overline underline;
text-decoration-style: dashed;
text-decoration-color: red;
font-size: 18px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Cricket Rankings</h1>
<p>The following are men's cricket rankings:</p>
<p class="multiple-lines">ODI Rankings</p>
</body>
</html>
A page displays with the heading "Cricket Rankings" and text "ODI Rankings" with red dashed lines both above and below the text.
Conclusion
The text-decoration-line property provides flexible options for adding visual emphasis to text through various line decorations. You can use single values or combine multiple values to achieve the desired visual effect.
96 Views
