我需要这样的东西:

如何使用CSS实现这一点?我知道有一种方法是使用背景图片,但是只有CSS才能做到这一点,没有任何图片吗?

推荐答案

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

Here's a demo

注意事项

  • 这将仅适用于IE8.然而,IE7does not support :before将在do支持:before但不支持CSS转换的浏览器中优雅地降级.
  • 旋转Angular 是固定的.如果文本较长,则该行不会触及文本的角.请注意这一点.

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>

Html相关问答推荐

HTML,网页页脚部分中的自定义问题

类内没有标签的css样式文本

如何在输入框上方对齐的单行中对齐标签文本(多语言)

如何在按钮的中心添加两条线

难以构建网页

是否无法在 Bootstrap 5 中更改 的字体系列?

成为带有 CSS 下划线的