我需要这样的东西:

如何使用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相关问答推荐

当使用浮动标签和大小时,如何在 Select 组件中有更多可见选项?

在元素之间添加空格

如何将功能附加到嵌入式药剂中的按钮?

将精选选项的价格合并为一个价格HTML、PHP和JQuery

带有排序元素的 CSS 网格

来自元标记的响应文本

jquery向单词中的一组字母添加跨度

如何保持块扩展以填充视口?

下划线在 Bootstrap 5 导航链接下无法正常工作

如何调整边框半径以匹配父边框半径

如何使用CSS将页面标题水平居中对齐

如何避免链接在悬停 timeshift 动,同时增加导航栏中的字体大小?

css 网格创建空行和列

HTML、CSS设计图像出格

CSS 跨度与子元素交替 colored颜色

将图像高度调整到容器 div 中而不使其高度增加

Cargo 在网格中的排列

如何使用 :hover zoom 重叠图像?

是否有一种静态方式可以根据暗模式 Select 一张或另一张图像?

向卡片添加过渡