Html – CSS strikethrough different color from text


The HTML elements del, strike, or s may all be used for a text strike-through effect. Examples:


….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'>

…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?

Best 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>


<strike style='color:red'>
  <span style='color:black'>black with red strikethrough<span>

(Note, however, that <strike> is considered deprecated in HTML4 and obsolete in HTML5 (see also 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:

    a.redStrikeHover:hover {
  <a href='#' class='redStrikeHover'>
    <span style='color:black'>hover me</span>
(IE7 seems to require some href be set on the <a> before :hover has an effect; FF and WebKit-based browsers do not.)