CSS strikethrough different color from text?
The HTML elements del, strike, or s may all be used for a text strike-through effect. Examples:
<del>del</del>
....gives: del
<strike>strike</strike> and <s>strike</s>
....gives: strike and strike
The CSS text-decoration property with a value line-through may be used similarly. The code...
<span style='text-decoration:line-through'>
text-decoration:line-through
</span>
...will also render to look like: text-decoration:line-through
However, the strikethrough line is typically the same color as the text.
Can CSS be used to make the line a different color?
Solution 1:
Yes, by adding an extra wrapping element. Assign the desired line-through color to an outer element, then the desired text color to the inner element. For example:
<span style='color:red;text-decoration:line-through'>
<span style='color:black'>black with red strikethrough</span>
</span>...or...
<strike style='color:red'>
<span style='color:black'>black with red strikethrough<span>
</strike>(Note, however, that <strike> is considered deprecated in HTML4 and obsolete in HTML5 (see also W3.org). The recommended approach is to use <del> if a true meaning of deletion is intended, or otherwise to use an <s> element or style with text-decoration CSS as in the first example here.)
To make the strikethrough appear for a:hover, an explicit stylesheet (declared or referenced in <HEAD>) must be used. (The :hover pseudo-class can't be applied with inline STYLE attributes.) For example:
<head>
<style>
a.redStrikeHover:hover {
color:red;
text-decoration:line-through;
}
</style>
</head>
<body>
<a href='#' class='redStrikeHover'>
<span style='color:black'>hover me</span>
</a>
</body>href be set on the <a> before :hover has an effect; FF and WebKit-based browsers do not.)
Solution 2:
As of Feb. 2016, CSS 3 has the support mentioned below. Here is a snippet from a WooCommerce's single product page with price discount
/*Price before discount on single product page*/
body.single-product .price del .amount {
color: hsl(0, 90%, 65%);
font-size: 15px;
text-decoration: line-through;
/*noinspection CssOverwrittenProperties*/
text-decoration: white double line-through; /* Ignored in CSS1/CSS2 UAs */
}
Resulting in:
CSS 3 will likely have direct support using the text-decoration-color property. In particular:
The
text-decoration-colorCSS property sets the color used when drawing underlines, overlines, or strike-throughs specified bytext-decoration-line. This is the preferred way to color these text decorations, rather than using combinations of other HTML elements.
Also see text-decoration-color in the CSS 3 draft spec.
If you want to use this method immediately, you probably have to prefix it, using -moz-text-decoration-color. (Also specify it without -moz-, for forward-compatibility.)