In the dynamic world of web content, information evolves. Prices change, details get updated, and sometimes, a piece of text needs to be marked as no longer current without entirely vanishing from existence. This is where implementing strikethrough in HTML & CSS becomes an indispensable skill, allowing you to visually communicate revision, deprecation, or correction with clarity and semantic integrity.
More than just drawing a line through text, mastering strikethrough involves making informed decisions about why you're doing it. Is it purely for visual flair? Or are you signaling a deeper meaning to both human readers and search engines? As a seasoned expert, I'm here to guide you through the nuances, ensuring your use of strikethrough is not just effective, but also accessible and semantically correct.
At a Glance: Key Takeaways
- HTML Tags for Meaning: Use
<del> for explicitly deleted content (like revisions) and <s> for content that's no longer accurate or relevant (like outdated prices). These tags convey semantic meaning. - CSS for Visuals: Use
text-decoration: line-through; when the strikethrough is purely a visual style and carries no semantic weight. - Customization Power: CSS offers extensive control over the line's style, color, and thickness (
text-decoration-style, text-decoration-color, text-decoration-thickness). - Accessibility Matters: Screen readers often ignore pure CSS strikethrough. Always use
del or s for semantic meaning, and consider sr-only text for enhanced accessibility. - SEO Impact:
del content is generally de-prioritized by search engines, while s content is indexed but might be given less weight. Pure CSS has no direct SEO impact. - Deprecated
<strike> Tag: Avoid the old <strike> tag; it's purely presentational and removed in HTML5.
Understanding the "Why" Behind the Line: Semantic vs. Visual
Before you even touch a line of code, ask yourself: What message am I trying to send with this strikethrough? The answer dictates whether you should reach for an HTML tag or a CSS property. This foundational understanding is the difference between a well-structured document and a visually pleasing but semantically confusing one.
The Semantic Approach: HTML Tags for Meaningful Strikethrough
When a line through text conveys specific meaning—like a revision, a correction, or an item that's no longer valid—HTML provides dedicated semantic tags. These tags tell browsers, search engines, and assistive technologies the purpose of the strikethrough, not just its appearance.
The <del> Tag: When Content Has Been Explicitly Deleted
Imagine you're reviewing a legal document, a technical specification, or a blog post with significant edits. The <del> (for "deleted") tag is your ally here. It's specifically designed to mark content that has been removed or substantially altered from a document, yet needs to remain visible for tracking changes or historical context.
When to use <del>:
- Revision Tracking: Showing previous versions of text in an edit history.
- Legal Documents: Indicating clauses or phrases that have been removed in an amendment.
- Collaborative Editing: Allowing multiple authors to see what changes have been proposed and accepted.
Example:
html
The original proposal stated: All employees must report by 8 AM. The updated policy is more flexible.
In this context, a screen reader might announce "All employees must report by 8 AM, deleted," or a similar phrasing, providing crucial context that the text is no longer active. Search engines also understand that content within `
` is less relevant for current indexing, treating it as historical data.
#### The `` Tag: For Content That Is No Longer Relevant or Accurate
The `` (for "strikethrough") tag has a slightly different, but equally important, semantic role. It's used for content that is *no longer accurate or relevant*, but you still need to display it to provide context. Think of it as saying, "This information *was* true or *was* the price, but it isn't anymore."
**When to use ``:**
* **Pricing Updates:** Showing an original price next to a new, discounted price.
* **Outdated Information:** Marking a previous date, location, or detail that has since changed, but you want to show the original for clarity.
* **Mistakes/Corrections:** Indicating a past error that has been corrected, without deleting the original context.
**Example:**
htmlSpecial Offer: $99.99 Now Only $49.99! Event Date: December 1st, 2023 January 15th, 2024
Here, the `` tag clearly communicates that "$99.99" and "December 1st, 2023" are no longer the current values, but their presence helps the reader understand the change. Screen readers might announce "99 dollars 99 cents, struck through," followed by the new price, again providing valuable context. Search engines typically index content within `` but may assign it less weight or relevancy than current, active content.
#### Why Not the `` Tag? The Evolution of HTML Semantics
You might encounter the `` tag in older HTML code. This tag was used purely for presentational strikethrough. However, it was **deprecated in HTML5** because it lacked semantic meaning. The modern philosophy of HTML separates structure and meaning (HTML) from presentation (CSS). Always opt for ``, ``, or pure CSS `text-decoration` over the legacy `` tag. It's a key distinction in crafting accessible and future-proof web content.
### The Visual Approach: CSS for Decorative Strikethrough
Sometimes, a strikethrough is just that—a line. When your intent is purely visual styling, without conveying any specific semantic meaning to browsers or assistive technologies, CSS is your tool. This is perfect for decorative elements, user interface hints, or stylistic choices where the line doesn't imply deletion or irrelevance.
#### The `text-decoration` Property: Your Styling Powerhouse
The most straightforward way to apply a visual strikethrough is with the CSS `text-decoration` property. Specifically, you'll use `text-decoration: line-through;`.
**Basic Implementation:**
css
/* Apply strikethrough to all paragraphs */
p {
text-decoration: line-through;
}
/* Apply strikethrough to a specific class */
.decorative-strikethrough {
text-decoration: line-through;
}
htmlThis paragraph has a basic strikethrough.
This text uses a decorative strikethrough.
This simple line of CSS adds a solid, single line through your text, typically in the same color as the text itself. But this is just the beginning; CSS offers deep customization.
#### Customizing Your Strikethrough Line
Modern CSS allows you to fine-tune the appearance of your strikethrough line, transforming it from a simple visual cue into a branded design element. You can break down `text-decoration` into more granular properties for precise control.
1. **`text-decoration-style`:** Change the line's pattern.
* `solid` (default)
* `double` (two lines)
* `dotted` (a series of dots)
* `dashed` (a series of dashes)
* `wavy` (a wavy line)
**Example:**
css
.dotted-line {
text-decoration-line: line-through;
text-decoration-style: dotted;
}
.double-line {
text-decoration-line: line-through;
text-decoration-style: double;
}
2. **`text-decoration-color`:** Set a specific color for the line.
**Example:**
css
.red-strikethrough {
text-decoration-line: line-through;
text-decoration-color: red;
}
.accent-strikethrough {
text-decoration-line: line-through;
text-decoration-color: var(--accent-color); /* Using CSS variables */
}
3. **`text-decoration-thickness`:** Control how thick the line appears. This property accepts various units (pixels, `em`, `rem`, percentages). For better accessibility and responsiveness, **relative units like `rem` are highly recommended**, as they scale with the user's root font size settings.
**Example:**
css
.thick-strikethrough {
text-decoration-line: line-through;
text-decoration-thickness: 2px;
}
.responsive-strikethrough {
text-decoration-line: line-through;
text-decoration-thickness: 0.1em; /* Scales with parent font size */
}
.extra-thick-strikethrough {
text-decoration-line: line-through;
text-decoration-thickness: 0.2rem; /* Scales with root font size */
}
#### The `text-decoration` Shorthand
For conciseness, you can combine these properties into the `text-decoration` shorthand. The order typically goes `[line] [color] [style] [thickness]`, though not all properties are required.
**Example:**
css
.shorthand-strikethrough {
text-decoration: line-through red wavy 2px;
}
This single line applies a red, wavy, 2-pixel-thick strikethrough.
## When to Choose Which Method: A Decision Framework
Navigating the choices between HTML tags and CSS can be simplified by a clear decision path. Always start by evaluating the *intent* of your strikethrough.
1. **Is the strikethrough conveying a change, deletion, or correction that has semantic meaning to the document's content?**
* **Yes:**
* If the content has been *explicitly removed or revised* (e.g., tracking changes, legal amendments), use the **`` tag**.
* If the content is *no longer accurate or relevant* but still provides context (e.g., outdated prices, old dates), use the **`` tag**.
* **No:** Proceed to step 2.
2. **Is the strikethrough purely a visual design element, without conveying any inherent meaning about the content's status?**
* **Yes:** Use the **`text-decoration: line-through;` CSS property**. This is ideal for decorative purposes, checklist items (though more robust solutions exist), or UI elements where the line is simply a stylistic choice.
Choosing the right tool for the job ensures your web pages are not only visually appealing but also semantically robust, accessible, and performant.
## Advanced Strikethrough Effects with CSS & Pseudo-elements
While `text-decoration` offers solid customization, the true power of CSS allows for far more dynamic and visually engaging strikethrough effects. By combining `text-decoration` with pseudo-elements (`::before`, `::after`) and CSS transitions, you can create impressive interactions.
### On Hover Strikethrough
A subtle yet effective interaction is to have a strikethrough appear when a user hovers over text. This can be used for menu items, interactive lists, or links that signify completion.
html
Hover over me!
css
.hover-strike {
text-decoration: none; /* Start with no underline/strikethrough */
transition: text-decoration 0.3s ease-in-out; /* Smooth transition */
}
.hover-strike:hover {
text-decoration: line-through; /* Add strikethrough on hover */
text-decoration-color: var(--primary-color, blue); /* Customize color */
text-decoration-thickness: 2px;
}
### Gradient Strikethrough
Want a strikethrough that really pops? A gradient line can add a modern, stylish touch. This typically requires using pseudo-elements with `background-image` for the line.
html
Gradient Line Through Me
css
.gradient-strike {
position: relative;
display: inline-block; /* Essential for pseudo-element positioning */
text-decoration: none; /* Remove default */
color: #333;
}
.gradient-strike::before {
content: '';
position: absolute;
top: 50%; /* Position roughly in the middle */
left: 0;
width: 100%;
height: 2px; /* Thickness of the line */
background: linear-gradient(to right, #ff00ff, #00ffff); /* Your gradient */
transform: translateY(-50%); /* Adjust vertical alignment */
z-index: -1; /* Place behind text */
}
This method provides excellent control but remember that the pseudo-element won't automatically wrap with text in the same way `text-decoration` does.
### Animated Strikethrough on Hover (Expanding Line)
A popular effect is a line that animates from one side to the other when hovered. This requires a pseudo-element with `width: 0` initially, expanding to `width: 100%` on hover.
html
Animated Hover Effect
css
.animated-strike {
position: relative;
display: inline-block;
text-decoration: none;
color: #333;
padding-bottom: 2px; /* Give space for the line */
}
.animated-strike::before {
content: '';
position: absolute;
bottom: 0; /* Position below text, adjust if needed for middle */
left: 0;
width: 0; /* Start with no width */
height: 2px;
background-color: var(--accent-color, purple);
transition: width 0.3s ease-out; /* Animate width */
}
.animated-strike:hover::before {
width: 100%; /* Expand on hover */
}
If you're looking for an easier way to experiment with these and other creative text styling, a dedicated tool can generate strike through text with various effects quickly, giving you code snippets to adapt.
### Oblique Strikethrough
For a truly unique look, an oblique (angled) strikethrough can be achieved using a pseudo-element with `transform: rotate()`.
html
Angled Strikethrough
css
.oblique-strike {
position: relative;
display: inline-block;
text-decoration: none;
}
.oblique-strike::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px; /* Line thickness */
background-color: #f00; /* Line color */
transform: translateY(-50%) rotate(-5deg); /* Angle the line */
transform-origin: center center;
z-index: -1;
}
These advanced techniques offer tremendous creative freedom but come with the caveat of needing careful positioning and testing to ensure they work across different screen sizes and text lengths.
## Crucial Considerations: Accessibility & SEO
Beyond visual appeal, how your strikethrough is implemented has significant implications for accessibility and search engine optimization. Ignoring these aspects can alienate users and diminish your content's discoverability.
### Making Strikethrough Accessible
Accessibility is paramount. While `text-decoration: line-through;` is visually evident to sighted users, it often provides no semantic information to assistive technologies like screen readers.
* **Pure CSS (`text-decoration: line-through;`)**: Screen readers will typically ignore this styling. They'll read the text as if no line is present. This is acceptable for purely decorative strikethrough but a significant problem if the line is meant to convey meaning (e.g., an outdated price).
* **HTML `` and `` tags**: These tags *do* convey semantic meaning to screen readers. For example:
* `Old Text` might be read as "Old Text, deleted" or "Old Text, struck through."
* `$99.99` might be read as "99 dollars 99 cents, struck through."
The exact phrasing can vary by screen reader and user settings, but the semantic context is usually provided.
#### Enhancing Accessibility with `sr-only` Text
For situations where the visual strikethrough (especially with `s` or `del`) might still lack sufficient clarity for screen reader users, you can provide additional, visually hidden text. This technique uses a CSS class (often named `sr-only` or `visually-hidden`) that hides content from visual browsers but keeps it accessible to screen readers.
**Example for a price change:**
htmlSpecial Offer: $99.99 Now $49.99!
css
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
In this enhanced example, the `aria-label` on the `` tag provides direct, explicit context, and the `sr-only` span adds "Now" before the new price for even clearer flow for screen reader users. This ensures that users who rely on assistive technologies receive the full context of the price change.
### Strikethrough and Search Engines (SEO)
Search engines interpret content based on its semantic meaning. Your choice of strikethrough implementation can influence how your content is indexed and ranked.
* **HTML `` tag**: Content within `` tags is generally understood by search engines as *deleted or removed*. While it's still indexed, it's typically given very low weight or may be effectively ignored for the current relevancy of the page. This is useful for demonstrating transparency in revisions without cluttering the "active" content.
* **HTML `` tag**: Content within `` tags is indexed, but search engines may interpret it as *outdated or less relevant* than surrounding, un-struck-through text. For example, if you have `Old Product Name New Product Name`, the "New Product Name" will likely receive more SEO weight. It's still valuable for historical context or showing price drops.
* **CSS `text-decoration: line-through;`**: This purely visual styling has **no direct impact on SEO**. Search engine crawlers primarily read the underlying HTML structure and content. They interpret `text-decoration: line-through;` as a stylistic instruction, not a semantic one. The text will be indexed and weighted just like any other text on the page.
**Key SEO Takeaway:** For content that is genuinely outdated or removed, using `s` or `del` is preferable to pure CSS, as it gives search engines a clearer signal about the content's status. For purely decorative lines, CSS is fine.
## Troubleshooting Common Strikethrough Issues
Even with clear guidelines, you might encounter bumps on the road. Here are some common issues and how to resolve them:
* **My CSS Strikethrough Isn't Showing!**
* **Specificity Wars:** Check if another CSS rule is overriding your `text-decoration` property. Use your browser's developer tools to inspect the element and see which styles are being applied. More specific selectors (e.g., `#id .class` vs. `.class`) or `!important` declarations can override your rules.
* **Typo:** Double-check `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, `text-decoration-thickness`, and the shorthand syntax for any misspellings.
* **Incorrect Selector:** Ensure your CSS selector correctly targets the HTML element you intend to style.
* **My Strikethrough Looks Weird on Different Browsers!**
* While `text-decoration` properties are widely supported, subtle differences in rendering can occur. Always test your custom CSS strikethrough effects across major browsers (Chrome, Firefox, Safari, Edge) to ensure consistency.
* For advanced pseudo-element tricks, browser support for CSS properties like `transform`, `gradient`, and `transition` is generally good, but older browsers might have limited support.
* **Readability Concerns:**
* **Overuse:** Too much strikethrough can make your content difficult to read and visually cluttered. Use it sparingly and purposefully.
* **Contrast:** Ensure your strikethrough line has sufficient contrast against the text and background, especially if you customize its color. Poor contrast can hinder readability, particularly for users with visual impairments.
* **Strikethrough Not Appearing in WordPress/CMS:**
* Most content management systems (CMS) like WordPress offer a strikethrough button in their visual editor (often an 'S' with a line through it). When you use this, the CMS typically inserts an `` tag. If you need `del` for more semantic meaning, you might need to switch to the HTML/code editor view. For purely visual effects, you'd apply custom CSS to a class.
## Strikethrough Beyond Code: What to Know in Content Editors
Many content creators work directly within visual editors rather than raw HTML. Familiar platforms like WordPress, Google Docs, or Microsoft Word also offer strikethrough functionality, usually through a dedicated button (often represented by an 'S' with a line through it) or a keyboard shortcut (e.g., `Alt + Shift + D` in some editors).
When you use these editor functions on a web-based CMS, they typically insert the `` HTML tag. This is because `` is the most common semantic strikethrough for indicating outdated content, such as price changes or corrections, which aligns with how most content writers use the feature. If your workflow requires the more specific semantic meaning of ``, you might need to switch to the CMS's code editor or custom block options to manually insert it.
## Best Practices for Effective Strikethrough Use
To ensure your strikethrough is impactful and user-friendly, adhere to these best practices:
1. **Prioritize Semantics:** Always start by asking if your strikethrough conveys meaning. If yes, use HTML tags (`del` or `s`). If no, use CSS. This is the golden rule.
2. **Don't Overuse:** Strikethrough draws attention because it's a disruption. If too much content is struck through, it loses its impact and makes the text hard to read. Use it judiciously.
3. **Ensure Readability:** Make sure the remaining text is still clear and legible around the strikethrough. Test different line thicknesses and colors.
4. **Consider Context:** Always ensure the reason for the strikethrough is clear to the user. If the meaning isn't obvious (e.g., in a complex legal document), consider adding a visible note or explanation.
5. **Maintain Design Consistency:** If you're using custom CSS strikethrough, ensure its style (color, thickness, style) aligns with your website's overall design language and branding.
6. **Test for Accessibility:** Regularly test your content with screen readers, especially if you're relying on semantic HTML tags for context. Supplement with `sr-only` text or `aria-label` where necessary to guarantee comprehensive understanding for all users.
7. **Future-Proof Your Code:** Stick to modern HTML5 semantic tags and robust CSS properties. Avoid deprecated tags like ``.
## Final Thoughts: Mastering the Art of the Line-Through
Implementing strikethrough in HTML and CSS is more than just a styling trick; it's a powerful communication tool. By understanding the distinction between semantic HTML tags and purely visual CSS properties, you gain the ability to accurately convey meaning, enhance accessibility for all users, and optimize your content for search engines.
Whether you're showing a price drop, marking a deleted clause, or simply adding a stylistic flourish, thoughtful application of strikethrough elevates your web content from merely functional to truly excellent. Go forth, experiment with these techniques, and use that line through your text with purpose and precision. Your readers, and search engines, will thank you.