Html CSS删除线与文本颜色不同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1107551/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS strikethrough different color from text?
提问by gojomo
The HTML elements del, strike, or smay all be used for a text strike-through effect. Examples:
HTML 元素del、strike或s都可以用于文本删除线效果。例子：
<del>del</del>
....gives: del
....给出： 德尔
<strike>strike</strike> and <s>strike</s>
....gives: strikeand strike
....给出：罢工和罢工
The CSS text-decorationproperty with a value line-throughmay be used similarly. The code...
可以类似地使用text-decoration带有值的 CSS属性line-through。编码...
<span style='text-decoration:line-through'>
text-decoration:line-through
</span>
...will also render to look like: text-decoration:line-through
...也将呈现为：text-decoration:line-through
However, the strikethrough line is typically the same color as the text.
但是，删除线通常与文本颜色相同。
Can CSS be used to make the line a different color?
可以使用 CSS 使线条具有不同的颜色吗？
回答by gojomo
Yes, by adding an extra wrapping element. Assign the desired line-through color to an outer element, then the desired text color to the inner element. For example:
是的，通过添加额外的包装元素。将所需的贯穿颜色分配给外部元素，然后将所需的文本颜色分配给内部元素。例如：
<span style='color:red;text-decoration:line-through'>
<span style='color:black'>black with red strikethrough</span>
</span>...or...
...或者...
<strike style='color:red'>
<span style='color:black'>black with red strikethrough<span>
</strike>(Note, however, that <strike>is considered deprecated in HTML4 and obsolete in HTML5(see also W3.org). The recommended approach is to use <del>if a true meaning of deletion is intended, or otherwise to use an <s>element or style with text-decorationCSS as in the first example here.)
（但是，请注意，这在 HTML4中<strike>被认为已弃用，在 HTML5 中已过时（另请参阅 W3.org）。推荐的方法是使用<del>是否要删除的真正含义，否则使用<s>具有text-decorationCSS的元素或样式，如这里的第一个例子。）
To make the strikethrough appear for a:hover, an explicit stylesheet (declared or referenced in <HEAD>) must be used. (The :hoverpseudo-class can't be applied with inline STYLE attributes.) For example:
要使 a:hover 出现删除线，<HEAD>必须使用显式样式表（在 中声明或引用）。（:hover伪类不能与内联 STYLE 属性一起应用。）例如：
<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>hrefhref设置<a><a>才能:hover:hover生效；FF 和基于 WebKit 的浏览器则没有。）回答by Mechanical snail
As of Feb. 2016, CSS 3 has the support mentioned below. Here is a snippet from a WooCommerce's single product page with price discount
截至 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 */
}
Resulting in:
导致：
CSS 3 will likely have direct support using the text-decoration-colorproperty. In particular:
CSS 3 可能会直接支持使用该text-decoration-color属性。特别是：
The
text-decoration-colorCSS property sets the color used when drawing underlines, overlines, or strike-throughs specified bytext-decoration-line. This is the preferred way to color these text decorations, rather than using combinations of other HTML elements.
该
text-decoration-colorCSS属性设置绘制下划线，overlines时，或删除线由指定使用的颜色text-decoration-line。这是为这些文本装饰着色的首选方法，而不是使用其他 HTML 元素的组合。
Also see text-decoration-colorin the CSS 3 draft spec.
另请参阅text-decoration-colorCSS 3 草案规范。
If you want to use this method immediately, you probably have to prefix it, using -moz-text-decoration-color. (Also specify it without -moz-, for forward-compatibility.)
如果您想立即使用此方法，您可能必须使用-moz-text-decoration-color. （-moz-为了向前兼容，也不要指定它。）
回答by Blazemonger
I've used an empty :afterelement and decorated one border on it. You can even use CSS transforms to rotate it for a slanted line. Result: pure CSS, no extra HTML elements!Downside: doesn't wrap across multiple lines, although IMO you shouldn't use strikethrough on large blocks of text anyway.
我使用了一个空:after元素并在其上装饰了一个边框。您甚至可以使用 CSS 变换将其旋转为一条斜线。结果：纯 CSS，没有额外的 HTML 元素！缺点：不会跨多行换行，尽管 IMO 无论如何您都不应该在大块文本上使用删除线。
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>回答by Rohin Tak
If you do not care about internet explorer\edge, then simplest way to achieve different color for strike-through would be to use CSS property: text-decoration-colorin conjunction with text-decoration:line-through;
如果您不关心 Internet Explorer\edge，那么实现不同颜色的删除线的最简单方法是使用 CSS 属性： text-decoration-color和 text-decoration:line-through;
.yourClass {
text-decoration: line-through !important;
text-decoration-color: red !important;
}
-- Does not work with Edge\Internet Explorer
-- 不适用于 Edge\Internet Explorer
回答by Vishnu SR
This CSS3 will make you line through property more easier, and working fine.
这个 CSS3 将使您更轻松地浏览属性，并且工作正常。
span{
text-decoration: line-through;
text-decoration-color: red;
}
回答by ibolmo
Adding to @gojomo you could use :afterpseudo element for the additional element. The only caveat is that you'll need to define your innerTextin a data-textattribute since CSS has limited contentfunctions.
添加到@gojomo，您可以:after对附加元素使用伪元素。唯一的警告是您需要innerText在data-text属性中定义您的属性，因为 CSS 的content功能有限。
s {
color: red;
text-align: -1000em;
overflow: hidden;
}
s:after {
color: black;
content: attr(data-text);
}<s data-text="Strikethrough">Strikethrough</s>回答by simbo
Here's an approach which uses a gradient to fake the line. It works with multiline strikes and doesn't need additional DOM elements. But as it's a background gradient, it's behind the text...
这是一种使用渐变来伪造线条的方法。它适用于多行罢工，不需要额外的 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;
}
See fiddle: http://jsfiddle.net/YSvaY/
见小提琴：http: //jsfiddle.net/YSvaY/
Gradient color-stops and background size depend on line-height. (I used LESS for calculation and Autoprefixer afterwards...)
渐变色标和背景大小取决于行高。（我使用 LESS 进行计算，然后使用 Autoprefixer ......）
回答by Eugene Kardash
Here you go:
干得好：
<style>body {color: #000;}</style>
<del> <span style="color:#999">facebook</span> </del>回答by Brady Edgar
In my experience the
根据我的经验
<span style='color:red;text-decoration:line-through'>
<span style='color:black'>black with red strikethrough</span>
</span>
isn't the best option. I had a co worker use this method without testing cross browser, so I had to go back and fix it because it caused issues in firefox. My personal recommendation would be to use the :after selector to create a strikethrough. That way it can go back to IE8 if you really wanted to without any style conflicts as well as solid across all other browsers.
不是最好的选择。我有一个同事在没有测试跨浏览器的情况下使用这种方法，所以我不得不回去修复它，因为它导致了 Firefox 中的问题。我个人的建议是使用 :after 选择器来创建删除线。这样它可以回到 IE8，如果你真的想要没有任何样式冲突，并且在所有其他浏览器中都是可靠的。
It also creates less markup and about the same amount of styling which in my opinion is a pretty big deal.
它还创建了更少的标记和大约相同数量的样式，在我看来这是一个非常重要的问题。
So if anyone else runs into similar issues hopefully this can help out:
因此，如果其他人遇到类似问题，希望这可以提供帮助：
.lineThrough {
position: relative;
&:after {
content: " ";
display: block;
width: 60px;
height: 1px;
background: red;
position: absolute;
top: 49%;
left: 50%;
margin-left: -30px;
}
}
obviously you could use transform: translate instead of margins, but this example is to work back to IE8
显然你可以使用 transform: translate 而不是边距，但这个例子是回到 IE8
回答by anoldermark
Blazemonger's reply (above or below) needs voting up - but I don't have enough points.
Blazemonger 的回复（上方或下方）需要投票 - 但我没有足够的积分。
I wanted to add a grey bar across some 20px wide CSS round buttons to indicate "not available" and tweaked Blazemonger's css:
我想在一些 20 像素宽的 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;
}
