How to Strikethrough Text Using CSS?

Learn how to apply strikethrough style to a 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; }

Hope you found this post useful. It was published . Please show your love and support by sharing this post.