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

Here you go you can also apply any 2 colors you want

a {
  text-decoration: none;
}
.outer {
  color:gray;
  text-decoration:line-through;

}
.inner {
  color: black;
  text-decoration:underline;
}

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

Answer 3

You can use border instead and set opacity to what you need:

#line-t {
  color: green;
  font-size: 20px;
  position: relative;
  display: inline-block;
}
#line-t span {
  position: absolute;
  width: 100%;
  border-top: 2px solid red;
  left: 0;
  top: 50%;
  opacity: 0.3;
}

<div id="line-t">
  foo bar
  <span></span>
</div>

here is the sample on codepen: http://codepen.io/startages/pen/wzapwV

Answer 4

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)

Answer 5

Here you go:

<style>body {color: #000;}</style>
<del>&nbsp;&nbsp;<a href="#" style="color:#999;text-decoration:none;">facebook</a>&nbsp;&nbsp;</del>