How to Create Line-Through Text in CSS

Introduction

Creating a line-through or strikethrough effect on text in CSS is a simple way to indicate removed or outdated content. The text-decoration property can be used to apply this effect.

Problem Statement

Create a CSS code that:

Adds a strikethrough effect to text using the text-decoration property.
Demonstrates how to customize the strikethrough style.

Example:

Input: A paragraph element with the text "Strikethrough Example".
Output: The text appears with a line-through (strikethrough) applied.

Solution Steps

Use text-decoration Property: Set text-decoration to line-through to apply the strikethrough effect.
Customize the Line-Through: Use different values for text-decoration to modify the style (e.g., color, thickness).

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strikethrough Text Example</title>
    <style>
        /* Step 1: Add strikethrough to text */
        .line-through-text {
            text-decoration: line-through;
        }

        /* Step 2: Customize the strikethrough color and style */
        .custom-line-through {
            text-decoration: line-through;
            text-decoration-color: red;
            text-decoration-thickness: 2px;
        }
    </style>
</head>
<body>

    <p class="line-through-text">This text is struck through using text-decoration: line-through.</p>
    <p class="custom-line-through">This text has a custom strikethrough with color and thickness.</p>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Use `text-decoration: line-through`

To add a strikethrough to text, use this CSS code:

.line-through-text {
    text-decoration: line-through;
}

Step 2: Customize the Strikethrough

To customize the strikethrough color and thickness, use this CSS code:

.custom-line-through {
    text-decoration: line-through;
    text-decoration-color: red;
    text-decoration-thickness: 2px;
}

Conclusion

You can easily create a strikethrough effect on text using the text-decoration: line-through property. Additionally, you can customize the strikethrough color and thickness to match your design needs.

Java Guides

Search This Blog