HTML元素del、strike或s都可以用于文本删除效果。例子:

<del>del</del>

....德尔给:

<strike>strike</strike> and <s>strike</s>

....给予:罢工和罢工

值为line-through的CSS text-decoration属性也可以类似地使用。代码…

<span style='text-decoration:line-through'>
    text-decoration:line-through
</span>

...也会渲染成这样:文本装饰:线贯穿

但是,划线通常与文本的颜色相同。

CSS可以用来使线的颜色不同吗?


当前回答

如果它能帮助别人,你可以使用css属性

text-decoration-color:红色;

其他回答

添加到@gojomo,您可以在伪元素之后使用:作为附加元素。唯一需要注意的是,您需要在data-text属性中定义您的innerText,因为CSS的内容函数有限。

年代{ 颜色:红色; text-align: -1000 em; 溢出:隐藏; } s:{后 颜色:黑色; 内容:attr(数据电文); } < s数据电文= "删除线”>删除线< / s >

Blazemonger的回复(上面或下面)需要投票-但我没有足够的分数。

我想在一些20px宽的CSS圆形按钮上添加一个灰色条来表示“不可用”,并调整了Blazemonger的CSS:

.round_btn:after {
    content:"";    /* required property */
    position: absolute;
    top: 6px;
    left: -1px;
    border-top: 6px solid rgba(170,170,170,0.65);
    height: 6px;
    width: 19px;
}

根据我的经验

<span style='color:red;text-decoration:line-through'>
    <span style='color:black'>black with red strikethrough</span>
</span>

不是最好的选择。我有一个同事在没有测试跨浏览器的情况下使用了这个方法,所以我不得不回去修复它,因为它在firefox中引起了问题。我个人的建议是使用:after选择器来创建擦除线。这样它就可以回到IE8,如果你真的想,没有任何风格冲突,以及在所有其他浏览器坚实。

它还创建了更少的标记和大致相同的样式,在我看来这是一个相当大的问题。

所以如果其他人遇到类似的问题,希望这能帮助他们:

.lineThrough {
    position: relative;

   &:after {
      content: "  ";
      display: block;
      width: 60px;
      height: 1px;
      background: red;
      position: absolute;
      top: 49%;
      left: 50%;
      margin-left: -30px;
   }
}

显然,你可以使用transform: translate来代替margin,但是这个例子是在IE8上运行的

给你:

<style>身体 {颜色: #000;}</style> <del>&nbsp;&nbsp;<span style=“color:#999”>facebook</span>&nbsp;&nbsp;</del>

将所需的贯穿颜色分配给父元素也适用于删除的文本元素(<del>)—假设客户端将<del>呈现为贯穿颜色。

http://jsfiddle.net/kpowz/vn9RC/