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可以用来使线的颜色不同吗?
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上运行的