如何使用css在删除线顶部显示文本倾斜删除答案

【问题标题】：How to strike through obliquely with css showing the text on top of the strike through如何使用css在删除线顶部显示文本倾斜删除
【发布时间】：2014-06-26 12:53:32
【问题描述】：

我刚刚遇到了一个非常好的答案here 关于“如何用 css 斜切”。解决方案很好，但我想知道是否可以在那里拉条 CSS sn-p 以显示删除线顶部的文本。

如果没有，是否有替代解决方案？

【问题讨论】：

令人困惑的是，即使罢工位于顶部，但如果罢工和文本具有相同的颜色，它不会帮助我们看到这一点。所以我们需要为文字和罢工指定不同的颜色。
当然，我的意思是在红色的 3px 粗线上写一个白色的文字

标签： css

【解决方案1】：

要将某些东西移到另一个后面，您需要给它一个低于另一个元素的z-index，在这种情况下，我给罢工一个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);
}

【讨论】：

是的，它有效。但我不明白为什么......我的意思是文本是同一个 span 元素的一部分，所以我认为 z-index 应用于行和文本。为什么文本也没有改变图层？
因为您没有将其应用于 .strikethrough 文本，而是将其应用于文本之前的 css 元素。看看：jsfiddle.net/p2F7G/3 可以解释它。
让我知道这是否有助于解释它，如果没有，我可能会做一些更好的例子。

【解决方案2】：

您可以将删除线的z-index 设置为低于文本。我突出显示了红色的文本，以便可以看到：

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

【讨论】：