CSS从文本中删除不同的颜色?

The HTML elements del, strike, or s may 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: ~~strike~~ and ~~strike~~

....给:罢工,罢工

The CSS text-decoration property with a value line-through may be used similarly. The code...

带有值线的CSS文本修饰属性也可以类似地使用。代码…

<span style='text-decoration:line-through'>
    text-decoration:line-through
</span>

...will also render to look like: ~~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可以用来改变线条的颜色吗?

11 个解决方案

#1

371

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-decoration CSS as in the first example here.)

(注意，在HTML4中被认为是不赞成的，在HTML5中是过时的(参见W3.org)。推荐的方法是，如果想要删除的真正含义，就使用 ~~，或者使用~~元素或样式，并在这里的第一个示例中使用文本修饰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:

要使strikethrough出现在:hover，必须使用显式样式表(在中声明或引用)。(悬停伪类不能应用于内联样式属性。)例如:

<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.)

#2

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-color property. In particular:

CSS 3可能会直接支持文本修饰-颜色属性。特别是:

The text-decoration-color CSS property sets the color used when drawing underlines, overlines, or strike-throughs specified by text-decoration-line. This is the preferred way to color these text decorations, rather than using combinations of other HTML elements.

text-decoration-color CSS属性设置了在绘制下划线、划线或文本- decorationline指定的走行时使用的颜色。这是给这些文本装饰着色的首选方法，而不是使用其他HTML元素的组合。

Also see text-decoration-color in the CSS 3 draft spec.

还可以在CSS 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.)

如果您想立即使用此方法，您可能需要在其前面加上- mozs -text- decorationcolor前缀。(也可以指定不带-moz-的参数，以便向前兼容。)

#3

I've used an empty :after element 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元素!缺点:不会跨多行包装，尽管在我看来你不应该在大块的文本上使用删除线。

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>

#4

Adding to @gojomo you could use :after pseudo element for the additional element. The only caveat is that you'll need to define your innerText in a data-text attribute since CSS has limited content functions.

添加到@gojomo时，您可以使用:after pseudo元素作为附加元素。惟一需要注意的是，您需要在data-text属性中定义innerText，因为CSS的内容功能有限。

CSS

CSS

<style>
  s {
    color: red;
    text-align: -1000em;
    overflow: hidden;
  }
  s:after {
    color: black;
    content: attr(data-text);
  }
</style>

HTML

HTML

<s data-text="Strikethrough">Strikethrough</s>

#5

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...)

渐变颜色停止和背景尺寸取决于线高。(后来我用的计算和自动修理工具较少…)

#6

Here you go:

给你:

<style>body {color: #000;}</style>
<del>&nbsp;&nbsp;<span style="color:#999">facebook</span>&nbsp;&nbsp;</del>

#7

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;
}

#8

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 selector来创建删除线。通过这种方式，如果您真的想要在所有其他浏览器之间避免任何样式冲突，那么它可以返回到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

#9

Assigning the desired line-through color to a parent element works for the deleted text element (<del>) as well - making the assumption the client renders <del> as a line-through.

为已删除的文本元素(~~)为父元素分配所需的行-通过颜色(~~)，使假设客户端将~~作为一条线通过。~~~~~~

http://jsfiddle.net/kpowz/vn9RC/

#10

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-color in 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

#11

-3

Here is a sample jQuery implementation – thanks to gojomo's answer and utype's suggestion (+1 for both)

下面是一个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');
  });
});

The CSS for that could be

CSS就是这样

.price strike, .price.special { color: Red; }
.price strike span { color: Black; }

#1

371