0

I've just run into a very nice answer here about "How to strike through obliquely with css". The solution is nice, but I wonder if it is possible to pimp the CSS snippet there to show the text on top of the strike through.

If not, an alternate solution?

Community
  • 1
  • 1
Max
  • 2,288
  • 2
  • 23
  • 41
  • the confusing thing is even if the strike lays on top but if both the strike and the text have the same color, it won't help us see that. So we need to specify different colors for the text and the strike. – King King May 08 '14 at 22:30
  • Of course, I meant to write a white text on top of a red 3px thick line – Max May 09 '14 at 08:55

2 Answers2

1

To move something behind the other you need to give it a z-index that is lower than the other element, in this case I gave the strike a z-index of -1

http://jsfiddle.net/p2F7G/1/

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: #F00;
  z-index: -1;

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}
Stephan
  • 426
  • 5
  • 13
  • Yes, it works. But I don't get why... I mean the text is part of the same span element, so I thought z-index was applied to the line and to the text. Why the text doesn't change layer too? – Max May 08 '14 at 23:10
  • because you are not applying it to the .strikethrough text, you're applying it to the css element before the text. have a look at: http://jsfiddle.net/p2F7G/3/ that may explain it. – Stephan May 08 '14 at 23:13
  • Let me know if that helped explain it, if not I can probably make some better examples. – Stephan May 09 '14 at 00:02
0

You can give the strikethru a lower z-index than the text. I highlighted the text red so it can be seen:

.strikethrough {
  position: relative;
  color: #f00;
}
.strikethrough:before {
  position: absolute;
  z-index: -1;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: #000;

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

http://jsbin.com/oqibus/109/

bjb568
  • 9,826
  • 11
  • 45
  • 66