How to change a link's line-through / strikethrough color?

Question

I have a link that has a strikethrough. I want to make the strikethrough lighter so the link text is easier to read, but can't figure out how to do it.

Here's what I want it to look like (using an inner span instead of a link because it comes out the way I want):

span.outer {
  color: red;
  text-decoration: line-through;
}
span.inner {
  color: green;
}

<span class="outer">
  <span class="inner">foo bar</span>
</span>

But this doesn't seem to work:

span.outer {
  color: red;
  text-decoration: line-through;
}
a.inner {
  color: green;
}

<span class="outer">
  <a href="#" class="inner">foo bar</a>
</span>

Any ideas?

Answer 1

Interesting that your first example works, I wouldn't have expected that… good to know, I guess!

You can achieve this appearance with a pseudo-element. Make sure the element is position:relative and then position the pseudo-element absolute, full-width, however tall you want the line to be, and top:[50% - half the height, rounded]. It'll look like this:

.fancy-strikethrough {
  color: green;
  position: relative; /* lets us position the `::after` relative to this element */
}
.fancy-strikethrough::after {
  content: ''; /* pseudo-elements must always have a `content` */
  position: absolute; /* lets us position it with respect to the `.fancy-strikethrough */

  /* placement */
  left: 0;
  top: 50%;

  /* make it a line */
  height: 1px;
  width: 100%;
  background: red;
}

<a class="fancy-strikethrough">test</a>

You can even have the line extend a little on the sides by giving the element some horizontal padding.

Answer 2

There's a css3 property for this: text-decoration-color

So you can have text in one color and a text-decoration line-through (or underline etc.) - in a different color... without even needing an extra 'wrap' element

.inner { 
    color: green;
    text-decoration: line-through;
    -webkit-text-decoration-color: red;
    text-decoration-color: red;
    font-size: 24px;
}

<a href="#" class="inner">green text with red strike-through in one element</a>

Codepen demo

NB: Browser Support is limited... (caniuse)

...at the moment to Firefox and Safari (and Chrome - but you need to enable the "experimental Web Platform features" flag in chrome://flags)