typography
Strikethrough
also called line-through (css), strike, struck out, crossed out
A rule drawn through the middle of text to mark it as removed, superseded, or no longer the current price.
The mark means the words are still there and no longer count. That is a different claim from deleting them, and the three places it earns its keep all depend on the reader being able to see what was replaced: a price that has been reduced, a task that has been finished, and an edit that someone else has to approve. Take the old value off the screen entirely and the reader loses the comparison the mark exists to make.
HTML has two elements and they are not synonyms. <del> is content removed from
the document, it pairs with <ins>, and it takes cite and datetime
attributes that say where the change was decided and when. <s> is content that
is no longer accurate or relevant but was never deleted, which is exactly the
superseded price. The old <strike> element is obsolete, and
text-decoration: line-through is presentation with no meaning attached at all,
so a completed to-do styled that way says nothing to anything that is not
looking at it.
Nothing announces a line by default. Screen readers ignore text-decoration
outright, and support for announcing <del> and <s> is uneven enough that
plenty of readers hear “sixty four pounds thirty nine pounds” and no indication
which one they can actually pay. The fix is words, not markup: put the state in
the text, with a visually hidden “was” and “now”, or with ::before and
::after content on the element carrying the CSS strings. On a to-do list, the
checked state is already being announced by the checkbox, so the line is
decoration on top of a fact that is exposed properly, which is the situation you
want.
The line itself has three knobs worth touching. text-decoration-thickness and
text-decoration-color let the rule sit lighter than the letters so it does not
fight them, and text-decoration-skip-ink does nothing here (it only affects
descenders under an underline). Keep the struck text short: a
struck paragraph is a paragraph nobody can read, and a struck heading reads as a
rendering bug. Struck prices are also regulated in most markets, where the
crossed-out figure has to be a price that was genuinely charged for a stated
period, so this is one piece of typography with a legal definition attached.
Which word?
| If you want | say |
|---|---|
| showing text that no longer applies | strikethrough |
| marking a link without relying on color alone | underline |
Related
See also: Soft delete