CSS strikethrough different color from text?
css, html
Solution
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>
(IE7 seems to require some `href` be set on the `<a>` before `:hover` has an effect; FF and WebKit-based browsers do not.)
Problem
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?