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
Selected Reading
Strikethrough text with CSS
Use the text-decoration property to create strikethrough text with CSS. The line-through value draws a horizontal line through the middle of the text.
Syntax
text-decoration: line-through;
Basic Example
<html>
<head>
</head>
<body>
<p style="text-decoration: line-through;">
This text will be striked through.
</p>
</body>
</html>
Using CSS Classes
For better organization, use CSS classes instead of inline styles:
<html>
<head>
<style>
.strikethrough {
text-decoration: line-through;
}
.price-old {
text-decoration: line-through;
color: #999;
}
</style>
</head>
<body>
<p class="strikethrough">This text is crossed out</p>
<p>Regular price: <span class="price-old">$29.99</span> Sale: $19.99</p>
</body>
</html>
Multiple Text Decorations
You can combine strikethrough with other decorations:
<html>
<head>
<style>
.combined {
text-decoration: line-through underline;
}
</style>
</head>
<body>
<p class="combined">This text has both strikethrough and underline</p>
</body>
</html>
Common Use Cases
| Use Case | Example |
|---|---|
| Deleted content | ~~This text was removed~~ |
| Old prices | ~~$50~~ Now $30 |
| Completed tasks | ~~Buy groceries~~ |
Conclusion
Use text-decoration: line-through to create strikethrough text in CSS. This property is widely supported and perfect for showing deleted content or crossed-out prices.
Updated on: 2026-03-15T23:18:59+05:30
1K+ Views
Advertisements