Keywords: CSS Strikethrough | Text Decoration | Color Control | HTML Semantics | Browser Compatibility
Abstract: This paper provides an in-depth analysis of techniques for implementing strikethrough effects with colors different from text in CSS. It addresses the limitation of default strikethrough matching text color through nested element strategies. The study examines the proper usage of HTML semantic elements del and s, compares application scenarios of the text-decoration property, and offers interactive implementations for hover states. Complete code examples and browser compatibility guidelines are included to serve as practical references for front-end developers.
Fundamental Implementation of Strikethrough Effects
In HTML and CSS, multiple approaches exist for creating text strikethrough effects. HTML semantic elements <del> and <s> can both represent strikethrough text, where <del> indicates deleted content with semantic meaning, while <s> denotes content that is no longer accurate or relevant. It is important to note that the <strike> element was deprecated in HTML4 and is obsolete in HTML5, making it unsuitable for modern web development.
The CSS text-decoration property offers more flexible control. By setting text-decoration: line-through, strikethrough effects can be applied to any element. Basic implementation code is as follows:
<span style="text-decoration: line-through">
This is text with strikethrough
</span>Implementation of Different Color Strikethrough
By default, the strikethrough color matches the text color. To achieve a strikethrough color different from the text, a nested element strategy is required. The outer element sets the strikethrough color and style, while the inner element defines the text color. This approach leverages CSS inheritance mechanisms and cascading rules.
Specific implementation code:
<span style="color: red; text-decoration: line-through">
<span style="color: black">Black text with red strikethrough</span>
</span>Alternatively, using semantic elements:
<del style="color: red">
<span style="color: black">Black text with red strikethrough</span>
</del>Strikethrough Effects in Interactive States
For implementing different color strikethrough in interactive states like hover, stylesheets must be used instead of inline styles, as the :hover pseudo-class cannot be applied within inline style attributes. Below is a complete hover effect implementation example:
<head>
<style>
.custom-strike:hover {
color: #ff0000;
text-decoration: line-through;
}
.custom-strike span {
color: #000000;
}
</style>
</head>
<body>
<a href="#" class="custom-strike">
<span>Hover to see red strikethrough effect</span>
</a>
</body>Browser Compatibility and Best Practices
This technical solution demonstrates good compatibility across modern browsers, including Chrome, Firefox, Safari, and Edge. It should be noted that in older versions of Internet Explorer, the <a> element requires a valid href attribute to trigger the :hover effect.
Recommended best practices for development:
- Prefer the
<del>element for genuinely deleted content - Use CSS classes instead of inline styles to enhance code maintainability
- Consider CSS variables for color management to facilitate theme switching
- Ensure sufficient color contrast between strikethrough and background for accessibility
Through proper element nesting and CSS style control, developers can flexibly implement various visual strikethrough effects to meet diverse design requirements.