CSS Strikethrough: Use Text-Decoration and Line-Through in CSS

CSS strikethrough is a CSS property that makes text look as though it has been struck through, like this. In web development and writing, this is frequently used to denote that text has been erased or is no longer relevant. But it can also be used for different things.

A strikethrough can be applied to a span element, paragraph, div, display inline block, or anything else that would take a text decoration. In addition to underline overline italics and bold, CSS strikethrough is a great way to convey information via HTML elements.

Today, we’re going to take a look at how to use a strikethrough (known as a line-through) with CSS or HTML, why it should be used, and when it shouldn’t be used. We’ll also take a look at how you can use the strikethrough/line-through with other text decorations — and how text decorations work in general.

What is the CSS strikethrough?

A CSS strikethrough actually refers to a “text-decoration: line-through.” But it can be referred to as a strike because the HTML version of it is the STRIKE.

A line-through is a text-decoration that adds a line through the text to sort of cancel it out. This can make the text a little difficult to read, but it can also be a useful way to “redact” information without eliminating it entirely.

What does strikethrough text denote?

Line-through text denotes that something is no longer relevant. While it can be stylistic, since it’s difficult to read, it’s usually used to cross-off information that you still want there.

For instance, line-through text could be used in a list:

• Start the server.
• Upload the HTML.
• Test the CSS.

In the above list, you’d know that the server was up, the HTML had been uploaded, but the CSS still needed to be tested.

Alternatively, it could be used to cross out something that was never correct. In conversational writing, a strikethrough can be used to “censor” oneself, to delete something that one should not say.

How do you use a text decoration style?

Text decoration in CSS is used by adding the text-decoration property to an element. The possible values for this property are as follows:

• Underline. Adds a line under the text.
• Overline. Adds a line over the text.
• Line-through. Adds a line through the text.
• Blink. Causes the text to blink (not supported in all browsers).
• None. Removes any text decoration from the text.

Now, blink used to be very popular in the old days, but it’s considered to be obnoxious bordering on potentially dangerous (for those who have seizures).

Overlines are also fairly rarely used; they’re like an underline but above the text instead.

What are other text decoration properties?

In addition to other text-decoration attributes, there are also other text-decoration properties:

• text-decoration-line. Adds a line above or below the text.
• text-decoration-style. Sets the style of the line added by text-decoration-line.
• text-decoration-color. Sets the color of the line added by text-decoration-line.

These properties can change the line, style, and color that is placed on the text, such as an underline in blue.

How do you use the strikethrough HTML tag?

The HTML strikethrough tag is used to denote text that has been struck through. It looks like this:

<strike>Strike!</strike>

It can be easier to do this than use CSS to strike text through. But this also means that you would need to find every instance of the <strike> tag if you ever wanted to modify it.

For the most part, CSS can’t do anything that HTML cannot. But what CSS does is make it easier to change your page dynamically if desired. For instance, say you had the following code:

H2 { text-decoration: line-through }

Then all H2s would be struck through. From there, you could remove the text-decoration strike from every H2 by changing a single line rather than having to change each independent H2.

How do I remove the CSS strikethrough?

If you want to remove the CSS strikethrough from your text, you can use the none value for the text-decoration property. This will remove any strikethrough from your text.

Can you use multiple text decorations in CSS?

Yes, you can use multiple text decorations in CSS. You would do this by adding multiple values to the text-decoration property separated by commas. So, for instance, if you wanted to underline and italicize a word, you would do the following:

text-decoration: underline, italics;

This would underline the word and italicize it. You can also use multiple values for text-decoration-line and text-decoration-style. For instance, if you wanted to have a line above and below the text, you would do the following:

text-decoration-line: overline, underline; text-decoration-style: dashed;

This would give you a line above and below the text with a dashed style. So, you could potentially overline, underline, and line-through a text, but you wouldn’t want to do this because it would make it entirely illegible!

When shouldn’t you use a line-through?

When you want your text to be readable. A line-through is usually used to cross out text that is no longer relevant. So if you want your text to be easily legible, it’s best not to use it.

You can also use the <del> tag for crossed-out text, which is more semantically correct. However, the <del> tag doesn’t always work in all browsers. So, if you need to ensure that your text is readable in any browser, the <strike> tag is a good fallback.

CSS can also be used to style strikethrough text. For example, you could make the line thicker, change the color, or make it blink. You can also use CSS to add a line above or below the text. This can be useful if you want to emphasize that something has been crossed out.

However, you should only use strikethrough text when it is necessary. Generally, strikethrough text is used to cross out information that is no longer relevant.

Conclusion: how to use CSS formatting

CSS formatting is generally placed in the HEAD STYLE section (<head><style></style></head>), but it can also be placed in a separate collection of CSS styles. If you have a lengthy text decoration line or a lot of modifications, using a separate .CSS file may make sense. You can also use a packager like SCSS to make the process of developing and packaging CSS code even easier.

Do you want to learn more about how to use CSS formatting? Strikethroughs are great, but they’re only the start. Consider taking a look at other elements of CSS, such as CSS NOWRAP or going through a beginner’s CSS course on Udemy.