How to Strikethrough Text Using CSS?

You can apply strikethrough to a text using the following CSS property/value:

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

Or, using the shorthand version:

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

Please note that, in CSS3+ it is also possible to change the color of the strikethrough to be different than the color of the text.

It might also be useful to know that the text-decoration-line (as well as the shorthand text-decoration) property allows multiple values separated by space. Therefore, you can easily combine strikethrough with any other text-decoration value(s). For example, the following would add a strikethrough and underline to the text:

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

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.