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


当前回答

这个CSS3将使您更容易通过属性线,并工作良好。

span{
    text-decoration: line-through;
    text-decoration-color: red;
}

其他回答

给你:

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

是的,通过添加额外的包装元素。为外部元素指定所需的贯穿线颜色,然后将所需的文本颜色分配给内部元素。例如:

< span风格= '颜色:红色;文字修饰:线穿过的> <span style='color:黑色'>黑色加红色擦除线</span> < / span >

…或… <罢工风格= '颜色:红色' > <span style='color:黑色'>黑色加红色擦除线<span> > < /罢工

(但是请注意,<strike>在HTML4中被认为已弃用,在HTML5中已过时(参见W3.org)。推荐的方法是使用<del>如果删除的真正含义是,或者使用<s>元素或样式与文本装饰CSS在这里的第一个例子。)

To make the strikethrough appear for a:hover, an explicit stylesheet (declared or referenced in <HEAD>) must be used. (The :hover pseudo-class can't be applied with inline STYLE attributes.) For example: <head> <style> a.redStrikeHover:hover { color:red; text-decoration:line-through; } </style> </head> <body> <a href='#' class='redStrikeHover'> <span style='color:black'>hover me</span> </a> </body> (IE7 seems to require some href be set on the <a> before :hover has an effect; FF and WebKit-based browsers do not.)

我使用了一个空的: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>

单一属性解决方案是:

.className {
    text-decoration: line-through red;
};

通过属性定义线条后的颜色。

这个CSS3将使您更容易通过属性线,并工作良好。

span{
    text-decoration: line-through;
    text-decoration-color: red;
}