To strikethrough texts with CSS like this, use the CSS property text-decoration and set the value to line-through:

text-decoration: line-through;

Basic CSS Strikethrough with text-decoration

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

Basic strikethrough effect

Strikethrough text are useful to indicate corrections, deprecated information, or completed tasks.

Customizing Strikethrough Appearance

You can take the strikethrough effect a step further by customizing its appearance. With CSS, you can:

Change the Line Color

By default, the line-through inherits the text color. To set a custom color, use text-decoration-color:

.css-strikethrough {
	text-decoration: line-through;
	text-decoration-color: red;
}

Red strikethrough effect

Adjust the Line Thickness

Control the thickness of the line with the text-decoration-thickness property:

.css-strikethrough {
	text-decoration: line-through;
	text-decoration-thickness: 3px;
}

Thick strikethrough effect

Add Underline and Strikethrough Simultaneously (Combine Effects)

You can add more than one decoration. For example, an underline with a strikethrough:

.css-strikethrough-underline {
	text-decoration: underline line-through;
}

Multiple strikethrough effect

Advanced CSS strikethrough effects

Animate it

Add a nice animation effect using @keyframes to animate the line appearing from left to right:

@keyframes strike {
	from {
		text-decoration-color: transparent;
	}
	to {
		text-decoration-color: black;
	}
}

.animated-css-strikethrough {
	text-decoration: line-through;
	text-decoration-color: transparent;
	animation: strike 1s ease-in forwards;
}

With CSS Pro

If you’re a CSS Pro user, adding a strikethrough to your text becomes even easier. With the Visual Editor:

1. Select the Element: Click on the element you want to style.
2. Open the Visual Editor: If not selected, click on the Design tab.
3. On “Typography”: Click on the line-through S icon.