strikethrough.text

HTML & CSS on Windows and Mac

Strikethrough in HTML & CSS <s>, <del>, line-through

Use <del> for removed content, <s> for content that’s no longer accurate, and CSS when it’s only decoration.

No longer accurate<s>…</s>
Removed in an edit<del>…</del>
Visual onlytext-decoration: line-through

Updated · strikethroughtext.online

Pick the element by meaning

HTML has two elements that render with a line through them, and they mean different things.

<del>: removed content. Use it when text has been deleted from a document and you want to show the edit, usually next to an <ins> for the replacement.

<p>The launch is <del datetime="2026-05-02">May 4</del> <ins>May 11</ins>.</p>

<s>: no longer accurate. Use it for content that’s still there for context but isn’t true any more, like a sale’s original price.

<p><s>$40</s> $25</p>

<strike> is obsolete. It still renders, but it has no meaning and fails validation. Replace it.

CSS, when it’s only decoration

If the line has no meaning, for a hover effect or a design flourish, use CSS on a neutral element:

.crossed {
  text-decoration: line-through;
  text-decoration-color: #c8321c;
  text-decoration-thickness: 2px;
}

text-decoration-style also accepts double, dotted, dashed and wavy. To remove the default line from <del> or <s> while keeping their meaning, set text-decoration: none and draw your own.

Make it accessible

Most screen readers don’t announce <s> or <del> by default, so “$40 $25” can be read as “forty dollars twenty-five dollars”. Add the meaning in text that only assistive tech hears:

del::before, del::after,
s::before, s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
s::before { content: " [was: "; }
s::after { content: "] "; }
del::before { content: " [deleted: "; }
del::after { content: "] "; }

Or write it into the content: “Was $40, now $25” reads well with or without the line.

Unicode, for places without HTML

The tool above also gives you the <s> snippet, plus Unicode versions that work in plain-text places like social posts, chat messages or a page <title>. Don’t use Unicode strikethrough in your page content, though. It breaks search, copy-paste and screen readers. Use real markup there.

Copy-paste version

For the places where HTML & CSS formatting won't follow your text, like file names, chat apps or a social bio.

16 characters, 4 words
Ctrl + Enter copies the first result

Runs in your browser. Nothing you type is uploaded.

  • strikethroughW̶a̶s̶ ̶$̶4̶0̶,̶ ̶n̶o̶w̶ ̶$̶2̶5̶
  • short strikeW̵a̵s̵ ̵$̵4̵0̵,̵ ̵n̵o̵w̵ ̵$̵2̵5̵
  • wavy strikeW̴a̴s̴ ̴$̴4̴0̴,̴ ̴n̴o̴w̴ ̴$̴2̴5̴
  • slashW̷a̷s̷ ̷$̷4̷0̷,̷ ̷n̷o̷w̷ ̷$̷2̷5̷
  • long slashW̸a̸s̸ ̸$̸4̸0̸,̸ ̸n̸o̸w̸ ̸$̸2̸5̸
  • double slashW̸̷a̸̷s̸̷ ̸̷$̸̷4̸̷0̸̷,̸̷ ̸̷n̸̷o̸̷w̸̷ ̸̷$̸̷2̸̷5̸̷
  • strike + underlineW̶̲a̶̲s̶̲ ̶̲$̶̲4̶̲0̶̲,̶̲ ̶̲n̶̲o̶̲w̶̲ ̶̲$̶̲2̶̲5̶̲
  • strike + overlineW̶̅a̶̅s̶̅ ̶̅$̶̅4̶̅0̶̅,̶̅ ̶̅n̶̅o̶̅w̶̅ ̶̅$̶̅2̶̅5̶̅
  • underlineW̲a̲s̲ ̲$̲4̲0̲,̲ ̲n̲o̲w̲ ̲$̲2̲5̲
  • double underlineW̳a̳s̳ ̳$̳4̳0̳,̳ ̳n̳o̳w̳ ̳$̳2̳5̳
  • overlineW̅a̅s̅ ̅$̅4̅0̅,̅ ̅n̅o̅w̅ ̅$̅2̅5̅
  • dottedW̤a̤s̤ ̤$̤4̤0̤,̤ ̤n̤o̤w̤ ̤$̤2̤5̤
  • waveW̰a̰s̰ ̰$̰4̰0̰,̰ ̰n̰o̰w̰ ̰$̰2̰5̰
  • x belowW͓a͓s͓ ͓$͓4͓0͓,͓ ͓n͓o͓w͓ ͓$͓2͓5͓
  • redacted████████████████
  • HTML<s>Was $40, now $25</s>

Questions people ask

What is the difference between <s> and <del> in HTML?

<del> marks content that was removed from a document, like an edit, and can carry cite and datetime attributes. <s> marks content that is no longer accurate or relevant, like an old price. Both are shown struck through by default.

Is the <strike> tag still valid?

No. <strike> is obsolete in HTML5. Browsers still render it, but use <s>, <del> or CSS instead.

Do screen readers announce strikethrough?

Most screen readers do not announce <s> or <del> by default, so struck text is read as if it were current. Add visually hidden text or CSS generated content to say "deleted" or "was", as shown on this page.

Keep going