html - CSS strikethrough different color from text?

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

(IE7 seems to require some href be set on the <a> before :hover has an effect; FF and WebKit-based browsers do not.)

Question 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-color CSS property sets the color used when drawing underlines, overlines, or strike-throughs specified by text-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.)

Question 3

I've used an empty :after element and decorated one border on it. You can even use CSS transforms to rotate it for a slanted line. Result: pure CSS, no extra HTML elements! Downside: doesn't wrap across multiple lines, although IMO you shouldn't use strikethrough on large blocks of text anyway.

s,  strike {    text-decoration: none;    /*we're replacing the default line-through*/    position: relative;    display: inline-block;    /* keeps it from wrapping across multiple lines */  }    s:after,  strike:after {    content: "";    /* required property */    position: absolute;    bottom: 0;    left: 0;    border-top: 2px solid red;    height: 45%;    /* adjust as necessary, depending on line thickness */    /* or use calc() if you don't need to support IE8: */    height: calc(50% - 1px);    /* 1px = half the line thickness */    width: 100%;    transform: rotateZ(-4deg);  }

<p>Here comes some <strike>strike-through</strike> text!</p>

Question 4

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

Question 5

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

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

html - CSS strikethrough different color from text?

Top 5 Answer for html - CSS strikethrough different color from text?

Top 3 video Explaining html - CSS strikethrough different color from text?

Related QUESTION?