如何用css斜划线

Question

我需要这样的东西：

如何用 css 实现这一点？我知道一种方法是使用背景图片，但是我可以只使用没有任何图片的 css 来实现吗？

原文由 Jaroslav Klimčík 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有一个 hacky 方法可以做到这一点，使用 :before 伪元素。你给 :before 一个边框，然后用CSS变换旋转它。这样做不会向 DOM 添加额外的元素，添加/删除删除线就像添加/删除类一样简单。

这是一个演示

注意事项

• 这仅适用于 IE8。 IE7 不支持 :before ，但是会在支持 :before 但 不 支持 CSS 转换的浏览器中正常降级。
• 旋转角度是固定的。如果文本较长，线条将不会触及文本的角。请注意这一点。

CSS

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

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

HTML

 <span class="strikethrough">Deleted text</span>

原文由 Bojangles 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用背景 linear-gradient 和 currentColor 以避免硬编码字体颜色：

 .strikediag {
  background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}
.withpadding {
  padding: 0 0.15em;
}

 The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.
<p>
The value is <span class="strikediag withpadding">2x</span>3x<br>
The number is <span class="strikediag withpadding">1234567890</span>.

如果不需要元素完全内联，可以使用伪元素将行放在元素的顶部。这样可以通过更改伪元素的大小来调整角度：

 .strikediag {
  display: inline-block;
  position: relative;
}
.strikediag::before {
  content: '';
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 0.38em;
  bottom: 0.38em;
  background: linear-gradient(to left top, transparent 45.5%, currentColor 47.5%, currentColor 52.5%, transparent 54.5%);
  pointer-events: none;
}

 The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.

原文由 user 发布，翻译遵循 CC BY-SA 3.0 许可协议