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

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">
foo bar
</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;
}
green text with red strike-through in one element
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 3

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 4

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 5

Here you go:
<style>body {color: #000;}</style>
<del> facebook </del>