How to change line / strikethrough line color?

Question

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

Here, I want this to look (using the inner range instead of the 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>

Run codeHide result

But this does not work:

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

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

Run codeHide result

Any ideas?

Answer 1

Interestingly, your first example works, I would not expect that ... good to know, I think!

. , position:relative, absolute, , , top:[50% - half the height, rounded]. :

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

Hide result

, .

Answer 2

2 ,

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>

Hide result

Answer 3

, :

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

Hide result

: http://codepen.io/startages/pen/wzapwV

Answer 4

css3: text-decoration-color

, - ( ..) - ... 'wrap'

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

Hide result

Codepen

NB: ... (caniuse)

... currently Firefox and Safari (and Chrome), but you need to enable the "Experimental web platforms" flag in the 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>

Run codeHide result