CSS strikethrough different color from text?

user_130288 0
Viewed 261331

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?

css html
15 Answers

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.)

user_1302880

This CSS3 will make you line through property more easier, and working fine. 

span{
    text-decoration: line-through;
    text-decoration-color: red;
}
user_110950140

If you do not care about internet explorer\edge, then simplest way to achieve different color for strike-through would be to use CSS property: text-decoration-color in conjunction with text-decoration:line-through;

.yourClass {
    text-decoration: line-through !important;
    text-decoration-color: red !important;
}

-- Does not work with Edge\Internet Explorer

user_42041960

If it helps someone you can just use css property

text-decoration-color: red;

user_44077610

Single Property solution is:

.className {
    text-decoration: line-through red;
};

Define your color after line through property.

user_59090260

Just an update, this can be easily done now by doing:

text-decoration: underline;
text-decoration: underline dotted;
text-decoration: underline dotted red;
text-decoration: green wavy underline;
text-decoration: underline overline #FF3028;

then add the desired font color with color: ....

Adding something that wasn't obvious to me when you apply this to React inline styling:

<p style= {{textDecoration:'line-through red', color:'gray'}} >

you need to switch the '-' for cammel case.

This renders the content of

....

in color gray crossed out by a red line.

For more details check the documentation here

user_153558390
Related