5

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?

kareem
  • 690
  • 1
  • 9
  • 20
  • I would just use a border that is displaced to make it strike through your text. I don't think you can change the strikethrough color. –  Sep 08 '16 at 01:46
  • As far as I know you can't. You can do a couple of hacks ... For instance the one suggested by K48. Or use pseudo elements! – Gacci Sep 08 '16 at 01:59
  • I agree with @Gacci. Pseudo elements seems a good way to go. They are easy to create and easy to manage. – Tino Caer Sep 08 '16 at 02:02

5 Answers5

4

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.

henry
  • 4,244
  • 2
  • 26
  • 37
  • Alternatively, if for some reason you really want to add extra element (I'd recommend against this, but there are always those edge cases) you can just put the outside the : **html** `foo bar` **css** `.struck {text-decoration: line-through; color: red} .struck span {color: green;}` – henry Sep 08 '16 at 03:04
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)

Danield
  • 121,619
  • 37
  • 226
  • 255
0

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>
Rudi Urbanek
  • 1,935
  • 1
  • 12
  • 15
0

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

chirag
  • 1,761
  • 1
  • 17
  • 33
Ali_k
  • 1,642
  • 1
  • 11
  • 20
0

Here you go:

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