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可以用来使线的颜色不同吗?
当前回答
我使用了一个空的: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>
其他回答
添加到@gojomo，您可以在伪元素之后使用:作为附加元素。唯一需要注意的是，您需要在data-text属性中定义您的innerText，因为CSS的内容函数有限。
年代{ 颜色:红色; text-align: -1000 em; 溢出:隐藏; ｝ s:{后 颜色:黑色; 内容:attr(数据电文); ｝ < s数据电文= "删除线”>删除线< / s >
下面是一个jQuery实现的示例——感谢gojomo的回答和utype的建议(+1)
$(function(){
//===================================================================
// Special price strike-out text
// Usage:
// Normally: <span class='price'>$59</span>
// On special: <span class='price' special='$29'>$59</span>
//===================================================================
$(".price[special]").each(function() {
var originalPrice = $(this).text();
$(this).html('<strike><span>' + originalPrice +'</span></strike> ' + $(this).attr('special'))
.removeAttr('special')
.addClass('special');
});
});
CSS可以是
.price strike, .price.special { color: Red; }
.price strike span { color: Black; }
下面是一种使用渐变来伪造线条的方法。它使用多行换行，不需要额外的DOM元素。但由于它是背景渐变，所以它在文本后面……
del, strike {
text-decoration: none;
line-height: 1.4;
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #ff0000), color-stop(0.7em, #ff0000), color-stop(0.7em, transparent), to(transparent));
background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
-webkit-background-size: 1.4em 1.4em;
background-size: 1.4em 1.4em;
background-repeat: repeat;
}
参见fiddle: http://jsfiddle.net/YSvaY/
渐变色位和背景大小取决于行高。(我使用LESS进行计算，然后使用自动修复…)
只是一个更新，这可以很容易地做到现在做:
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一起工作
