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

Strikethrough CSS: A Stylish Guide to Crossing Out Text with Precision

css strikethrough text is one of those small CSS techniques that solves a very real UI problem: how do you show that something is done, removed, outdated, or discounted without making the page harder to scan? A clean line through text does the job fast, and when it is styled well, it keeps the interface readable instead of noisy.

This guide focuses on text-decoration and related CSS techniques, not image overlays or visual hacks that are harder to maintain. You will see how to apply a basic line-through, how to customize it, when to use semantic HTML like <del>, and how to keep the result accessible across devices and browsers.

For readers building modern interfaces, this topic often comes up in task managers, pricing tables, editorial workflows, and product UIs. If you also work in utility-first systems, the same idea maps cleanly to the tailwind css official utility-first css framework and the tailwind css official docs utility-first css framework approach, where a single utility can express a crossed-out state without extra markup.

Strikethrough should communicate status, not decoration. If a user cannot tell why the text is crossed out, the style is doing more harm than good.

Understanding Strikethrough in CSS

Strikethrough means text with a line running through the middle of it. In plain UI terms, it tells the reader, “this item used to matter, but it no longer does.” That makes it useful for task lists, shopping discounts, version edits, and deprecated content.

The reason this works so well is that users already understand the visual language. A crossed-out task feels complete. A crossed-out original price signals a sale. A crossed-out word in an editor suggests revision. That shared meaning reduces the amount of explanation your interface needs.

How strikethrough differs from underline and overline

Strikethrough is part of the broader text decoration family, but it has a different job than underline or overline. Underlines often indicate links or emphasis, while overlines are rare and usually stylistic. Strikethrough is about removal, negation, or completion.

• Underline: commonly used for links or emphasis.
• Overline: mostly decorative or typographic.
• Strikethrough: indicates deletion, completion, or an outdated state.

That distinction matters because visual hierarchy affects readability. A strikethrough should remain readable enough that the user can still identify the original text. If the line is too heavy or too close to the characters, the message becomes harder to process.

For editorial and compliance-aware workflows, semantic meaning also matters. The W3C HTML Editing Elements spec and the broader HTML content model make it clear that presentation and meaning should not be confused. In practice, that means using the right tag when the content is truly deleted and using CSS when you only need a visual cue.

The Core CSS Property: text-decoration

The most direct way to create a strikethrough is text-decoration: line-through;. It is simple, widely supported, and easy to attach to a class that you can reuse anywhere in your interface.

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

This works on paragraphs, spans, list items, and inline elements. Because it is a CSS class, you can toggle it on and off in response to user actions, such as checking a task as complete or marking a list item as archived.

Applying it to different elements

Here is how the same class can be used across several common HTML elements:

<p class="completed">This paragraph is no longer current.</p>
<span class="completed">Out of stock</span>
<li class="completed">Submit quarterly report</li>

That separation between structure and presentation is the real advantage. Your HTML stays focused on content, while CSS controls how the status is displayed. It is cleaner, easier to test, and easier to update later.

Simple toggle example for a to-do interface

A common pattern is clicking an item to mark it complete. You can use JavaScript to add or remove the class without changing the content itself:

document.querySelectorAll('.todo-item').forEach(item => {
  item.addEventListener('click', () => {
    item.classList.toggle('completed');
  });
});

That approach scales well in productivity apps because the state lives in the class name. If your design system later changes the look of completed items, you only update the CSS once. For reference, MDN Web Docs on text-decoration provides a solid overview of supported values and behavior.

Combining Strikethrough With Other Text Decoration Options

text-decoration does more than add a line through text. It can also control line style, color, and thickness, which lets you match the effect to the tone of the UI. That matters when you want a subtle crossed-out label in a professional app versus a more expressive treatment in a creative product.

You can combine values such as solid, dashed, dotted, double, and wavy with line-through to suggest different meanings. A dashed or dotted line can imply something tentative or editable. A plain solid line feels neutral and familiar. A wavy line may fit playful or experimental interfaces, but it can feel out of place in finance, healthcare, or enterprise software.

Examples of style combinations

.strike-solid {
  text-decoration: line-through solid #666;
}

.strike-dashed {
  text-decoration: line-through dashed #999;
}

.strike-double {
  text-decoration: line-through double #c00;
}

.strike-wavy {
  text-decoration: line-through wavy #999;
}

Color and thickness matter too. A thin, gray line usually keeps the emphasis on the original text. A thick, high-contrast line can make the state more obvious, but it can also overpower the content. Use restraint unless the crossed-out state needs to shout.

Brand tone should guide your choice. A legal or healthcare product usually wants a plain, legible line-through. A design tool, classroom app, or creative checklist may benefit from a more expressive decoration style. If you are working within a utility-first stack, the same visual outcome can often be achieved through utilities inspired by the tailwind css utility-first css framework official workflow, which keeps styles consistent and easy to scan.

Solid line-through	Best for clarity, professional interfaces, and standard task completion states.
Dashed or dotted line-through	Useful when you want the crossed-out state to feel lighter, tentative, or less permanent.
Double or wavy line-through	Works better in stylized interfaces where visual personality matters more than strict formality.

Styling Strikethrough for Better Readability

A strikethrough should not bury the text. If the line is too heavy, too dark, or too close to the letters, the user spends extra effort decoding it. That slows scanning, which is the opposite of what the style is supposed to do.

Readability is especially important on mobile. Smaller screens compress typography, reduce spacing, and make busy interfaces harder to parse. What looks fine on a 27-inch monitor can become muddy on a phone if the strike line is too aggressive.

Practical readability adjustments

• Reduce contrast with muted gray or lower opacity for inactive states.
• Adjust font weight so the text remains visible under the line.
• Increase line height in multi-line items to avoid visual collisions.
• Keep the strike thin unless the design specifically requires emphasis.
• Test on smaller screens to make sure the line does not overpower the word shapes.

If you are striking out a long phrase, the line can cross awkward letter combinations or visually merge with descenders like g, y, and p. In those cases, a little extra spacing or a custom pseudo-element strike line can improve legibility.

Accessibility is part of readability. The W3C WCAG contrast guidance is a useful reminder that visual states must remain perceivable. If a crossed-out label is the only clue that something is inactive, ensure the contrast and surrounding context support that meaning.

Readable strikethrough is subtle, not weak. Users should notice the state change immediately, but they should still be able to read the original content without strain.

Using Strikethrough in Common UI Patterns

css strikethrough text appears in more places than most developers expect. It is a practical pattern for status, pricing, versioning, and editorial workflows. The key is matching the visual treatment to the user’s expectation in that specific context.

Completed checklist items and productivity apps

In task managers, a crossed-out task means the job is done. That is probably the most familiar use case, and it works because it mirrors paper to-do lists people have used for decades. Pair the line-through with another cue, such as a checked box or a dimmed color, so the state is clear even for users who have trouble perceiving the strike itself.

E-commerce pricing and discounts

In retail interfaces, strikethrough usually marks the original price while the sale price sits beside it. This is one of the clearest examples of visual hierarchy: the old price should still be readable enough to show the discount, but the current price should dominate. If the strike line is too bold, the sale message loses clarity.

Editorial revisions and collaborative notes

Writers, editors, and product teams often use strikethrough to show that a phrase has been removed or replaced. In collaborative editing, that makes changes visible without permanently deleting the history. In notes and project comments, the effect can help show which items have already been addressed.

Menus, subscriptions, and feature lists

Crossed-out labels also work when a feature or plan item has been removed. For example, a subscription plan may cross out an included feature that no longer exists, or a menu may strike out an item that is temporarily unavailable. The crossed-out label should be paired with a short explanation if users might otherwise assume it is still available.

• Task apps: shows completion.
• Retail pages: shows original prices or expired offers.
• Content tools: shows revision history or removed text.
• Subscription pages: shows deprecated plan features.

For broader product and workforce context, UX decisions like these often mirror general accessibility and usability guidance from organizations such as Nielsen Norman Group, while CSS behavior itself is documented in official references like MDN Web Docs.

Custom Strikethrough Techniques Beyond the Default

The default line-through is fast and reliable, but it is not always the best visual fit. If you need more control over placement, thickness, animation, or style, pseudo-elements give you a stronger design surface.

A custom strike line is especially useful when the font has unusual proportions, when the decoration needs to sit slightly above or below the baseline, or when the line must animate in a specific way. That kind of control is hard to get from text-decoration alone.

Using pseudo-elements for custom lines

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

.custom-strike::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: #444;
  transform: translateY(-50%);
}

This technique lets you place the strike exactly where you want it. You can make it thicker, animate its width, or offset it to create a more dramatic effect. It also helps when the built-in decoration style is too close to the font’s natural stroke weight.

When custom lines make sense

Use custom lines when the design system requires precision. A sale badge might need a shorter strike line that ends before an icon. An editorial interface might want a thick red line for deleted copy. A gamified app might want a playful line animation that feels more celebratory.

Keep one caution in mind: custom lines can create maintenance overhead if every component uses a slightly different offset or animation curve. In a large codebase, consistency matters more than visual novelty. The best custom solution is the one your team can reproduce reliably.

Animated Strikethrough Effects

Animation can make a completed task feel responsive, but it should be used carefully. The goal is to confirm state change, not to entertain people who are trying to get work done. A short, lightweight animation is often enough.

A common approach is to animate the line drawing from left to right. This gives the user a clear visual cue that something changed. It works especially well in checklists, onboarding flows, and success states where the action itself deserves a little feedback.

Basic animation idea

@keyframes strike {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.animated-strike::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: #222;
  transform-origin: left;
  animation: strike 180ms ease-out forwards;
}

Keep the timing short. A strike effect that drags on too long can feel clumsy, and users may interpret it as lag. In interface work, subtle motion is usually better than theatrical motion.

Performance and usability considerations

Animations should remain lightweight because the user often triggers them repeatedly. Avoid expensive layout thrashing, and prefer transforms or opacity changes over constantly recalculating position. On lower-end mobile devices, that matters more than teams sometimes expect.

If motion sensitivity is a concern, respect the user’s system preferences with prefers-reduced-motion. That is good practice for any animated state change, including a strike-through effect. The MDN documentation on prefers-reduced-motion is a practical reference when you are implementing this responsibly.

Browser Compatibility and Cross-Platform Considerations

Most modern browsers support strikethrough styling without drama, but the details can still vary. Thickness, position, and the visual quality of dashed or wavy lines may render a little differently across browsers and operating systems.

That is why testing matters. If your UI depends on the exact appearance of the line, validate it in Chrome, Safari, Firefox, Edge, and on mobile browsers. Even a small difference in font rendering can shift the strike enough to affect the overall polish.

What to test

• Line position: does it cut through the intended part of the text?
• Line thickness: is it too bold on high-density screens?
• Decoration style: do dashed or wavy lines degrade gracefully?
• Font interaction: does the strike clash with the typeface?
• Responsive behavior: does the effect still read well on narrow screens?

If you need external verification, browser testing platforms such as BrowserStack are commonly used for cross-browser checks. For the underlying standard, the W3C CSS Text Decoration Level 3 spec explains how decoration properties are intended to behave.

Fallbacks matter too. If a complex style is not fully supported in a specific browser, the simplest fallback is often the best one: plain line-through. It is better to deliver a clear crossed-out state than to force a decorative effect that breaks in edge cases.

Accessibility and Semantic Considerations

One of the most important decisions is whether the crossed-out text is only a visual status or whether it represents actual deleted content. If the content itself has been removed from the document meaningfully, semantic HTML such as <del> can be more appropriate than a CSS class alone.

That distinction matters because assistive technologies may interpret semantic elements differently from purely visual styling. Screen readers, for example, can provide more context when the markup communicates deletion rather than just a cosmetic decoration.

When to use CSS and when to use semantic HTML

• Use CSS when the text is still current but visually marked as done, unavailable, or discounted.
• Use <del> when the content has been deleted from the document meaningfully.
• Use both when you need semantic meaning and a custom visual treatment.

Context also helps. A crossed-out word with no explanation can confuse users, especially on mobile or in dense interfaces. If possible, include a short label, tooltip, or adjacent status text such as “completed,” “removed,” or “original price.”

Keyboard and screen reader users should not have to guess what the decoration means. The W3C WCAG Quick Reference is a good checkpoint for making sure your design decisions support perceivable, understandable content. In regulated or enterprise environments, that level of clarity is not optional.

Best Practices for Using Strikethrough Effectively

The best strikethrough styles are the ones people barely notice until they need them. That sounds counterintuitive, but it is the point. The effect should communicate status instantly without turning the interface into visual clutter.

Overuse is the most common mistake. If half the page is crossed out, users stop trusting the signal. The same problem happens when the line style changes too often or when different parts of the product use different meanings for the same visual treatment.

What good strikethrough design looks like

1. Use it purposefully for completion, removal, discounting, or revision.
2. Keep it consistent across the product or design system.
3. Protect readability with reasonable contrast and line thickness.
4. Support the meaning with text, icons, or status labels.
5. Test on real devices instead of relying on desktop-only previews.

Design systems often fail when one component handles struck text one way and another component does it differently. If your app uses utility classes, document the expected state clearly so developers apply the same class names and visual tokens everywhere. If your team follows a utility-first approach similar to the tailwind css official utility-first css framework model, consistency is easier to enforce because the styling pattern stays compact and predictable.

Good strikethrough design also respects content strategy. If the text is obsolete, cross it out only if the user still needs to see it. If the text is important historical context, a simple strike may not be enough; add an explanation. If the text is merely decorative, consider whether strikethrough is even the right tool.

For design and usability verification, it helps to compare the component against guidance from CISA on clear, resilient digital communication practices, especially in environments where users need to distinguish current information from outdated or replaced content quickly.

Conclusion

css strikethrough text is more than a visual gimmick. It is a practical way to show completion, removal, discounting, or revision while keeping interfaces clean and scannable. The foundation is simple: text-decoration: line-through;.

From there, you can refine the effect with style, color, thickness, animation, or a custom pseudo-element line. Just keep the core goal in mind: the crossed-out text should still be readable, the meaning should be obvious, and the design should fit the context.

If you are building a checklist, an e-commerce sale price, a revision history, or a product state indicator, start with the simplest version that works. Then test it across browsers, screen sizes, and accessibility tools before adding polish. That is the difference between a decoration that looks nice and a component that actually helps users.

For your next UI update, use strikethrough deliberately. Make the status clear, keep the typography readable, and let the style support the message instead of competing with it.

CompTIA®, Microsoft®, AWS®, Cisco®, ISACA®, and PMI® are trademarks of their respective owners.

text-decoration: line-through; 
 text-decoration-color: red; 
 text-decoration-style: wavy; 
 text-decoration-thickness: 2px;