CSS strikethrough different color from text? – Dev

The best answers to the question “CSS strikethrough different color from text?” in the category Dev.

QUESTION:

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?

ANSWER:

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:
Text decoration example


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

ANSWER:

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

ANSWER:

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

ANSWER:

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>