CodesBeautify

HTML Strikethrough Generator

Produce crossed out text with the right element, or a purely visual CSS line-through.

Strikethrough HTMLNo longer accurate
<s>Regular price 49.00</s>
Runs locally in your browser

About the HTML Strikethrough Generator

HTML has two strikethrough elements and they mean different things. The s element marks content that is no longer accurate or relevant, such as a superseded price or a sold out item. The del element marks content removed from a document and carries cite and datetime attributes recording where the change was discussed and when it happened. This tool writes either one, plus a purely visual option using a CSS line-through for cases where nothing semantic is implied.

The style and colour controls exist because a red or dashed strike is common in editorial diffs and pricing tables. They set text-decoration-style and text-decoration-color, which are far easier to maintain than the old trick of drawing a rotated border on a pseudo element. All three options look identical on screen, so choose on meaning rather than appearance, and keep the CSS route for decoration that carries no information.

There is an accessibility catch worth knowing: most screen readers announce nothing at all for crossed out text, so if the fact that something was withdrawn matters, write it in words as well as showing it. A discounted price should say the old figure was 49.00, not rely on a line through the number. Comparing two versions of a document instead? The Diff Checker lines up insertions and deletions side by side.

How to use

  1. Type the text that should appear crossed out.
  2. Choose s for outdated content, del for an edit, or CSS for pure decoration.
  3. For del, add the date of the change and a link explaining it.
  4. Copy the snippet, with the stylesheet if you changed the colour or style.

Common questions

What is the difference between s and del?
The s element says the content is no longer accurate. The del element says it was removed from the document as an edit.
Is the strike tag still valid?
No. The old strike element was dropped from the standard; use s, del or a CSS line-through instead.
Will a screen reader announce the line?
Usually not, so put the meaning in words when it matters rather than relying on the visual line alone.
How do I make the line red?
Set the line colour and the tool adds a text-decoration-color rule, leaving the text itself in the inherited colour.