Strikethrough text in HTML and CSS

In this article, we have explained different ways in which one can Strikethrough text in HTML and CSS. This include strike, s, del tags along with CSS properties like text-decoration.

Table of contents:

  1. Deprecated: strike and s tags
  2. Use del tag in HTML
  3. CSS properties for Strikethrough text

Let us get started with Strikethrough text in HTML and CSS.

Deprecated: strike and s tags

There are two deprecated options to strikethrough text in HTML:

  • strike tag: Not supported in HTML5

  • s tag: Supported but not recommended to use. May give wrong output.

  • Strike tag

Strike tag was originally used to strikethrough text in HTML but the support was removed in HTML5 and hence, cannot be used currently.

Strike tag is used as:

This is <strike>NOT</strike> OpenGenus.

If you are using HTML4 and before, the output will be like:

This is NOT OpenGenus.

  • s tag

s tag will strikeout the text in current version of HTML but it is not recommended to use. HTML documentation say that the output of s tag may not be correct.

s tag uses the default line-through CSS property (we have explained this later in this article):

s {
  text-decoration: line-through;
}

It is used as:

This is <s>NOT</s> OpenGenus.

Expected output:

This is NOT OpenGenus.

Use del tag in HTML

We can strikethrough text in HTML using del tags.

del tags are supported in HTML5 unlike the other tags like strike which were supported in previous HTML versions. Hence, to Strikethrough text, you must use del tags.

One can use del tag as follows:

This is <del>NOT</del> OpenGenus.

Output:

This is NOT OpenGenus.

CSS properties for Strikethrough text

In CSS, strikethrough or a line across the text can be displayed by setting the text-decoration property to 4 distinct values:

  • overline
  • line-through
  • underline
  • A combination of the 3 above values

You can set the CSS as follows:

p {
  text-decoration: line-through;
}

In the above CSS, all p elements in HTML will be the text-decoration property set to "line-through", hence, all text in p tags will have a line crossing the text midway.

The 3 properties are as follows:

  • overline: A line just above the text
  • line-through: A line crossing the text midway (real meaning of strikethrough)
  • underline: A line just under the text

We can set the different properties in CSS as follows:

<style>
.strike1 {
  text-decoration: overline;
}

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

.strike3 {
  text-decoration: underline;
}
</style>

HTML code to use the above CSS:

<p class="strike1">This is OpenGenus (overline)</p>
<p class="strike2">This is OpenGenus (line-through)</p>
<p class="strike3">This is OpenGenus (underline)</p>

Output:

This is OpenGenus (overline)

This is OpenGenus (line-through)

This is OpenGenus (underline)

Try this Strikethrough tool which generates text with strikeout in plain text which you can copy and paste anywhere. Note that you cannot copy the strikeout in HTML directly but can be done using the tool.

With this article at OpenGenus, you must have the complete knowledge of how to strikethrough text in HTML and CSS.