css - 如何使用 css 倾斜删除线，在删除线上方显示文本

Question

我刚遇到一个很好的答案 here关于“如何用css斜划线”。解决方案很好，但我想知道是否可以在此处添加 CSS 片段以在删除线上方显示文本。

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

Answer 1

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