Strikethrough CSS: How to Cross Words Off Your List with Style

Strikethrough CSS is the fastest way to show that text is completed, outdated, removed, or discounted without deleting the original context. The core technique is simple: text-decoration: line-through;. The hard part is using it well so the crossed-out text stays readable, accessible, and semantically correct in real interfaces.

Primary CSS property	text-decoration: line-through;
Common semantic tags	<del> and <s>
Best use cases	Completed tasks, discounted prices, removed text, outdated options
Accessibility goal	Visual meaning plus semantic meaning, not color alone
Advanced options	text-decoration-color, text-decoration-thickness, pseudo-elements, transforms
Baseline support	Broadly supported across modern browsers as of August 2026

What Is Strikethrough CSS?

Strikethrough CSS is a text-decoration style that draws a horizontal line through text to indicate a change in status. In interface design, users read that line as a signal that something is finished, removed, no longer valid, or superseded. That makes it one of the clearest visual indicators in UI design, especially when you need to preserve context instead of deleting the text entirely.

The key advantage is speed. A crossed-out item tells the user what changed without forcing them to hunt for history, compare versions, or guess whether something disappeared accidentally. You see this pattern in task managers, ecommerce pricing, revision workflows, and settings screens where a deprecated choice should still be visible for comparison.

Strikethrough also has a long editorial history. Editors and proofreaders have used struck-through text for correction, deletion, and revision for centuries, and that old convention still shapes how users interpret it online. The visual language is familiar enough that a user usually understands it in a split second, which is exactly what a good UI cue should do.

A strikethrough should communicate status, not just style. If the line does not mean “done,” “removed,” or “not valid anymore,” it probably does not belong there.

For context, the related wording in the HTML specification and browser behavior aligns with the visual goal, but the implementation should still be deliberate. The MDN text-decoration reference is a practical starting point for how browsers handle line-through rendering, while the semantic distinction between deleted and outdated content comes from HTML itself.

Why Does Strikethrough Work So Well in UI Design?

Strikethrough works because it mirrors how people mentally process change. The text remains visible, so the user can compare the old state and the new state without losing information. That matters in interfaces where context is part of the experience, such as shopping carts, todo lists, change logs, and content editing tools.

It also fits well with how people scan screens. A line through the middle of a word creates an immediate status cue without requiring extra labels or long explanations. A task manager can mark “Send invoice” as complete, and an ecommerce page can show a sale price next to a crossed-out original price. In both cases, the visual message is almost instant.

Strikethrough vs underline vs overline

Underline usually signals emphasis, links, or selection. Overline is much less common in general UI and tends to look decorative or specialized. Strikethrough is the clearest option when the intent is “this still exists, but it is no longer the active or current version.”

• Underline draws attention to actionable or important text.
• Overline is more decorative or niche in common interfaces.
• Strikethrough signals removal, completion, or invalidation.

This distinction matters because UI users do not read decorations in isolation. They read them as meaning. If you need users to understand that a value has changed, strikethrough is often more effective than changing the color alone. For broader accessibility guidance on how users interpret visual cues, the W3C WAI recommendations remain a useful standard.

Prerequisites

You do not need a complex toolchain to use strikethrough CSS well, but you do need a few basics in place. The goal is to make the styling reusable and semantically correct, not to patch it in one-off with inline code.

• HTML knowledge for choosing the right tag, especially <del> and <s>.
• CSS knowledge for applying text-decoration and related properties.
• A browser developer tools panel for checking how the line renders in different fonts and layouts.
• Basic accessibility awareness so you do not rely on color alone to communicate meaning.
• A component-based workflow if you want to reuse the style across tasks, prices, or status labels.

If your UI includes content that changes often, standardizing the pattern early saves time later. In a design system, one consistent “struck” state is easier to maintain than a dozen slightly different versions spread across pages and components.

How Do You Add Strikethrough in CSS?

You add strikethrough in CSS with text-decoration: line-through;. That declaration is the baseline solution and should be your default unless you have a very specific visual requirement that the native property cannot satisfy.

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

Apply that class to inline text, spans, paragraphs, list items, buttons, or table cells when the status applies to the whole element. For example, a todo item can use a class on the entire label, while a pricing component may strike only the original price and leave the sale price untouched.

Use class-based styling instead of inline styles when the same behavior appears more than once. Inline styles are harder to maintain, harder to override, and harder to standardize inside component libraries. A class like .is-crossed-out or .is-deprecated is much easier to reuse in a real product.

You can also combine the strike with other text-decoration values, but only when the intent is still clear. For example, a simple price comparison might use a line-through on the original amount and a distinct color for the current amount. Avoid piling on effects just because CSS allows it.

For official CSS syntax details and browser support nuances, MDN text-decoration-line is the most practical reference. The important point is simple: the browser already knows how to draw the line, so your job is to use it in a way that improves comprehension.

What Is the Difference Between <del> and <s>?

<del> is used for content that has been deleted from a document or page. It carries semantic meaning, which makes it the better choice when the text reflects an actual removal, correction, or revision history. <s> is used for text that is no longer accurate or relevant, but not necessarily “deleted” in the editorial sense.

That difference is subtle but important. If you remove a product feature from a release note, <del> makes sense. If a price is no longer current or a recommendation has become obsolete, <s> may be the more accurate tag. The visual style can look the same, but the meaning is not the same.

When semantic HTML is better than a plain span

Semantic HTML is better when the text meaning matters to users, assistive tech, or search engines. A plain <span> plus CSS only gives you the line; it does not explain why the line is there. That is fine for purely visual experiments, but it is weak for production UI.

• Use <del> when the content was removed or edited out.
• Use <s> when the content is no longer accurate or relevant.
• Use a plain <span> only when meaning is not important.

Search engines and assistive technologies benefit from semantic structure because they can infer document intent more accurately. For HTML semantics guidance, the WHATWG HTML Living Standard is the primary reference. If you need strict editorial meaning, the tag choice should match the real business logic, not just the visual effect.

How Do You Style Strikethrough for Better Readability?

Readable strikethrough is usually a restrained strikethrough. The line should be visible enough to communicate status, but not so strong that it destroys the letterforms underneath. If people have to squint to read the text, the effect has gone too far.

CSS gives you several controls beyond the basic line-through. text-decoration-color lets you tune the line color, text-decoration-thickness changes how heavy the strike looks, and text-decoration-style can make the line solid, dashed, or dotted. In most interfaces, a solid line with moderate contrast is the safest choice.

.price-old {
  text-decoration-line: line-through;
  text-decoration-color: #888;
  text-decoration-thickness: 2px;
  text-decoration-style: solid;
}

text-decoration-skip-ink can also help when the strike intersects letters with descenders or unusual shapes. It is more relevant in dense typography where readability matters. In a small UI label, that may be the difference between “this is legible” and “this looks broken.”

For a real interface, combine the strike with muted text color, tighter content grouping, or a companion status label such as “Completed” or “Old price.” That gives users two signals instead of one and reduces the chance of misreading. The goal is not to make the text disappear; the goal is to preserve information while clarifying its status.

Where Is Strikethrough Used in Real Interfaces?

Strikethrough is common in task managers, ecommerce sites, document editors, and comparison tables because it preserves context while signaling change. Users can still see what was there before, which makes the transition from old state to new state easier to understand.

Task managers

In a todo list, a crossed-out task shows completion without removing the item from history. That is useful when users want proof of progress or need to review completed work later. For example, “Submit quarterly report” can stay visible, but the strike makes it clear the task is no longer active.

Ecommerce pricing

In ecommerce, the struck-through original price is one of the most recognized UI patterns on the web. The old price gives the discount context; the sale price shows the current action. Without the strike, users may not realize there was a price reduction at all.

Editorial and revision workflows

Editors use strikethrough when they want to preserve the deleted wording for review or approval. This is especially useful in content management, legal review, and collaborative drafting. A visible strike makes the change auditable without forcing a separate diff tool for every small edit.

Deprecated options and features

Product teams often keep old options visible but crossed out when they are being phased out. That approach helps users understand what changed and reduces confusion during transitions. It is also a transparency signal: the interface is showing the old state instead of hiding it.

For product and pricing patterns, Nielsen research on user behavior and established UI conventions both point to the same lesson: users trust interfaces that make state changes obvious and reversible in context.

How Do You Make Strikethrough Accessible?

Accessibility means users can understand the crossed-out text whether they are using sight, a screen reader, or a high-contrast mode. A line through text alone is not always enough because the meaning may be lost if the user cannot see the visual cue clearly. That is why semantic HTML and supporting context matter.

A screen reader does not always treat visual decorations as meaningful status by default. If the text represents deletion, no longer accurate content, or a completed state, the HTML should carry that meaning where possible. The visual effect then becomes a reinforcement, not the only signal.

• Do not rely on color only to show a status change.
• Keep contrast readable so the original text can still be scanned.
• Add labels or nearby context when the strike alone might confuse users.
• Test with assistive technologies if the content affects important decisions.

This aligns with the broader accessibility guidance from Section 508 and the WCAG 2.2 Quick Reference. A crossed-out price should still be readable. A completed task should still be understandable. And a removed option should still be obvious enough that users do not mistake it for an active choice.

Good accessibility does not remove visual styling. It makes sure the styling is not the only thing carrying meaning.

What Cross-Browser and Device Issues Should You Watch For?

Line-through support is broadly reliable, which is one reason strikethrough CSS is such a safe baseline choice. Still, the exact look can vary across browsers, operating systems, fonts, and display sizes. That variation is usually small, but it becomes noticeable in precise UI work like pricing tables or compact mobile lists.

Different fonts change how the line intersects letters. A heavy font may make the strike look too low or too high compared with the text baseline. Dark mode can also expose contrast problems that were not obvious in light mode, especially if the strike color is only slightly darker than the text itself.

Test the effect on mobile, tablet, and desktop, not just in a large browser window. A strike that looks elegant on a 27-inch monitor may disappear at 375 pixels wide. If the text is small, add slight spacing or contrast changes so the status still reads correctly on touch devices.

• Check Chrome, Firefox, Safari, and Edge for render differences.
• Review light and dark modes for contrast consistency.
• Verify multiple font families if your design system supports them.
• Inspect compact layouts where small text can lose clarity.

For browser consistency questions, vendor documentation and standards references such as MDN on text-decoration-thickness are more reliable than guessing from screenshots. The safest implementation is the one that still looks correct under the least favorable conditions.

How Do You Create Advanced Strikethrough Effects?

Advanced strikethrough styling is useful when the default line-through is too plain or too limited for a branded interface. The most common advanced approach is to use pseudo-elements for precise line placement, which gives you control over thickness, angle, offset, and color. Another option is to rotate or skew the strike for a more stylized look.

.custom-strike {
  position: relative;
  display: inline-block;
}

.custom-strike::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px solid currentColor;
  transform: rotate(-8deg);
  transform-origin: center;
}

This kind of effect can look good in marketing pages, creative portfolio layouts, or bold editorial design. It is less appropriate in administrative tools where clarity matters more than flair. In those cases, the native text-decoration property remains easier to maintain and more predictable.

Pseudo-elements also require more care with overflow, wrapping, and multi-line content. If the text wraps onto two lines, a single absolutely positioned strike may not align well unless you design for that behavior. That is why custom lines should be treated as a last-mile design choice, not the starting point.

For browser-safe advanced techniques, the MDN pseudo-elements guide is helpful. If the visual effect ever makes the content harder to read, the effect is doing the wrong job.

How Does Strikethrough Fit in Utility-First CSS and Design Systems?

Utility-first CSS makes strikethrough easy to standardize because the state can be applied consistently with a small set of reusable classes. In a design system, that means completed, removed, or discounted text all follow the same visual rule instead of being improvised by individual developers. Consistency matters more than novelty when the same state appears across many screens.

For example, a component library may define a single “muted struck” state for completed tasks and a “sale original price” state for pricing. That helps product teams avoid style drift. It also makes future refactoring simpler because the effect lives in one place instead of being scattered throughout templates.

• Use utility classes for simple, repeatable strike states.
• Use component variants when the struck text appears in a structured UI component.
• Document the meaning so teams know whether the state means deleted, obsolete, or completed.
• Keep the style minimal so the meaning stays clear across themes and screen sizes.

If your team uses a token-based system, the strike color, thickness, and spacing can all be standardized. That is a better long-term approach than having one engineer use a thin gray line and another use a heavy black line. The visual language should read the same everywhere.

What Are the Most Common Mistakes to Avoid?

The biggest strikethrough mistake is using it when no status change exists. If the line does not communicate a real state, it becomes decoration, and decoration is a weak reason to confuse users. Every strike should answer a simple question: “What changed?”

Another common problem is over-styling. A thick red line across a sentence can overpower the text and make it feel broken. The goal is to preserve legibility while signaling change, not to win a design contest.

• Do not use strikethrough as ornament without meaning.
• Do not strike large paragraphs when a shorter label would communicate better.
• Do not rely on strike plus color alone to indicate status.
• Do not mix inconsistent styles across components.
• Do not ignore semantics when the text has real document meaning.

Another mistake is failing to align the visual cue with the product’s behavior. If a task is crossed out but still editable, users may wonder whether it is actually complete. If a discounted price is crossed out but not paired with a current price, the interface can feel vague or misleading. The most effective strikethroughs are the ones that match the system state exactly.

How Do You Verify It Worked?

You verify strikethrough CSS by checking that the text is visibly crossed out, semantically correct, and still readable in the target layouts. The line should appear where expected, remain visible at the intended font size, and not obscure the text so much that users stop being able to read it.

1. Inspect the element in browser developer tools and confirm the text-decoration-line value is applied.
2. Check the semantic tag to make sure <del>, <s>, or a plain element matches the content meaning.
3. Test at multiple widths so the strike still looks correct on mobile and tablet layouts.
4. Review contrast in light and dark themes to confirm the line remains visible.
5. Use screen reader or accessibility tooling to confirm the text still makes sense without the visual cue.
6. Compare against the design intent to ensure the strike signals completion, removal, or outdated status.

Common failure symptoms include a line that disappears at small sizes, a strike that blends into the text, or a semantic mismatch where the HTML says one thing and the interface implies another. If the text is only visually crossed out but the app state says it is still active, the design is misleading. That is a product bug, not just a CSS issue.

Conclusion

Strikethrough CSS is a simple tool with a surprisingly important job. It helps users recognize completed tasks, outdated information, deleted content, and discounted prices at a glance. When you pair the visual line with the right semantic HTML and accessibility checks, the result is clearer, faster, and easier to maintain.

The best implementation usually starts with the native line-through property, then adds just enough refinement to preserve readability. That means choosing the right tag, testing across browsers and devices, and resisting the urge to turn a status signal into decoration. A thoughtful strikethrough improves comprehension. A careless one creates noise.

If you are building or updating a UI, use the simplest version that tells the truth. Then verify that the truth still reads well in dark mode, on mobile, and inside your design system. For practical front-end standards and implementation guidance, keep the official references from MDN and the W3C close at hand.