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可以用来使线的颜色不同吗?
当前回答
给你:
<style>身体 {颜色： #000;}</style> <del> <span style=“color：#999”>facebook</span> </del>
其他回答
这个CSS3将使您更容易通过属性线，并工作良好。
span{
text-decoration: line-through;
text-decoration-color: red;
}
只是一个更新，这可以很容易地做到现在做:
text-decoration: underline;
text-decoration: underline dotted;
text-decoration: underline dotted red;
text-decoration: green wavy underline;
text-decoration: underline overline #FF3028;
然后用color: ....添加想要的字体颜色
添加一些对我来说不明显的东西，当你把它应用到React内联样式:
<p style= {{textDecoration:'line-through red', color:'gray'}} >
您需要将“-”转换为驼峰情况。
这将呈现....的内容用红线划掉的灰色。
要了解更多细节，请查看这里的文档
如果你不关心internet explorer\edge，那么最简单的方法来实现不同的颜色擦除将是使用CSS属性: 文字装饰-色彩配合文字装饰:贯穿;
.yourClass {
text-decoration: line-through !important;
text-decoration-color: red !important;
}
—不能与Edge\Internet Explorer一起工作
单一属性解决方案是:
.className {
text-decoration: line-through red;
};
通过属性定义线条后的颜色。
截至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-)。
