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:红色;
其他回答
将所需的贯穿颜色分配给父元素也适用于删除的文本元素(<del>)—假设客户端将<del>呈现为贯穿颜色。
http://jsfiddle.net/kpowz/vn9RC/
截至2016年2月，CSS 3支持如下所述。下面是一个来自WooCommerce的单品折扣页面的片段
/*Price before discount on single product page*/
body.single-product .price del .amount {
color: hsl(0, 90%, 65%);
font-size: 15px;
text-decoration: line-through;
/*noinspection CssOverwrittenProperties*/
text-decoration: white double line-through; /* Ignored in CSS1/CSS2 UAs */
}
导致:
css3很可能直接支持使用text-decoration-color属性。特别是:
text-decoration-color CSS属性设置在绘制由text-decoration-line指定的下划线、覆盖线或划除线时使用的颜色。这是为这些文本装饰上色的首选方法，而不是使用其他HTML元素的组合。
请参见css3草案规范中的text-decoration-color。
如果你想立即使用这个方法，你可能必须给它加上前缀，使用-moz-text-decoration-color。(为了向前兼容性，在指定时不带-moz-)。
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;
}
添加到@gojomo，您可以在伪元素之后使用:作为附加元素。唯一需要注意的是，您需要在data-text属性中定义您的innerText，因为CSS的内容函数有限。
年代{ 颜色:红色; text-align: -1000 em; 溢出:隐藏; ｝ s:{后 颜色:黑色; 内容:attr(数据电文); ｝ < s数据电文= "删除线”>删除线< / s >
我使用了一个空的:after元素，并在它上面装饰了一个边框。您甚至可以使用CSS转换来旋转斜线。结果:纯CSS，没有额外的HTML元素!缺点:不跨多行换行，尽管在我看来，你不应该在大块文本上使用擦除线。
s, strike { text-decoration: none; /*we're replacing the default line-through*/ position: relative; display: inline-block; /* keeps it from wrapping across multiple lines */ } s:after, strike:after { content: ""; /* required property */ position: absolute; bottom: 0; left: 0; border-top: 2px solid red; height: 45%; /* adjust as necessary, depending on line thickness */ /* or use calc() if you don't need to support IE8: */ height: calc(50% - 1px); /* 1px = half the line thickness */ width: 100%; transform: rotateZ(-4deg); } <p>Here comes some <strike>strike-through</strike> text!</p>
