CSS Strikethrough Text

The CSS Strikethrough is used to create a line trough some text.

Text with a strikeout is often used to mean that the line is to be ignored, typically because it has become irrelevant by something else. You can create a strikeout through the use of pure CSS, but you should use the HTML del element if you want it to carry semantic meaning.

The strikeout is also known as a strikethrough. The below example shows how to make a Strikethrough using the del element.

 <p>It was <del>stupid</del> not to move the closet.</p>

The del element is used to indicate that something has been deleted from the page.

The CSS Strikethrough

You can also use CSS to make a strikethrough, it will require the use of the CSS text-decoration property. The below example shows how to give a simple class a strike-through style:

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

There are other values for the text-decoration property, two of these values are underline and underline, you should check the reference to learn how to use those.

To make the text below the css strikethrough more visible, you may wrap it in a span, and then change the color of the del and span elements respectively. I.e.

 <p>It was <del><span>stupid</span></del> not to move the closet.</p>

Doing this will only change the color of the strikethrough itself. You can then apply the following CSS code:

del {
    color: #ff0;
}
del span {
    color: #000;
}

More CSS Tutorials

  1. How to make Italic text
  2. Make text bold with CSS