CSS删除线与文本不同的颜色？答案

【问题标题】：CSS strikethrough different color from text?CSS删除线与文本不同的颜色？
【发布时间】：2009-07-10 03:35:40
【问题描述】：

HTML 元素 del、strike 或 s 都可用于文本删除线效果。例子：

<del>del</del>

....给出：~~del~~

<strike>strike</strike> and <s>strike</s>

....给出：~~strike~~ 和 ~~strike~~

可以类似地使用值为line-through 的CSS text-decoration 属性。代码...

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

...也将呈现为：~~text-decoration:line-through~~

但是，删除线通常与文本颜色相同。

可以用 CSS 让线条变成不同的颜色吗？

【问题讨论】：

透明删除效果可以看transparent strikethrought on text

标签： html css

【解决方案1】：

是的，通过添加一个额外的包装元素。将所需的线条颜色分配给外部元素，然后将所需的文本颜色分配给内部元素。例如：

<span style='color:red;text-decoration:line-through'>
  <span style='color:black'>black with red strikethrough</span>
</span>

...或...

<strike style='color:red'>
  <span style='color:black'>black with red strikethrough<span>
</strike>

（但是请注意，<strike> 是 considered deprecated in HTML4 and obsolete in HTML5 (see also W3.org)。如果想要删除的真正含义，推荐的方法是使用 <del>，否则使用 <s> 元素或使用text-decoration CSS 的样式，如这里的第一个示例所示。）

要使删除线出现在 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>

（IE7 似乎需要在<a> 上设置一些href 才能使:hover 生效；FF 和基于WebKit 的浏览器则不需要。）

【讨论】：

我的“这不可能！”回答。
Jquery 实现会非常有用。
@utype 你为什么要使用 jQuery？
包装元素有点烂。在大多数情况下，您可以使用简单的伪元素实现几乎相同的效果，即del { position:relative } 然后del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }。
只是一个包装。巧妙。哦，我的上帝，这比我想出的所有东西（伪元素）都要好。干得好！

【解决方案2】：

截至 2016 年 2 月，CSS 3 具有下述支持。这是来自 WooCommerce 的单一产品页面的带有价格折扣的 sn-p

/*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 */
}

导致：

CSS 3 可能会直接支持使用text-decoration-color property。特别是：

text-decoration-color CSS 属性设置绘制由text-decoration-line 指定的下划线、上划线或删除线时使用的颜色。这是为这些文本装饰着色的首选方式，而不是使用其他 HTML 元素的组合。

另见text-decoration-color in the CSS 3 draft spec。

如果您想立即使用此方法，您可能必须使用-moz-text-decoration-color 作为前缀。（为了向前兼容，也可以不指定-moz-。）

【讨论】：

“CSS 3 可能会有”相当...乐观。
@BoltClock：如何乐观？它已经在 W3C 工作草案中，正在积极推进中。
根据caniuse，目前（2014 年）没有浏览器支持不带前缀的text-decoration-color。
3 年后……Firefox 和 Safari 拥有它 = 20% 的覆盖率。
截至 2019 年 3 月，text-decoration-color 受除任何 Microsoft 浏览器外的所有主流浏览器支持：developer.mozilla.org/en-US/docs/Web/CSS/…

【解决方案3】：

我使用了一个空的:after 元素并在其上装饰了一个边框。您甚至可以使用 CSS 变换将其旋转为斜线。 Result: pure CSS, no extra HTML elements! 缺点：不会跨越多行，尽管 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);
}

&lt;p&gt;Here comes some &lt;strike&gt;strike-through&lt;/strike&gt; text!&lt;/p&gt;

【讨论】：

@Veve HTML strikethrough element -- 非语义版本
谢谢，我找了这个，特别是旋转线
使用 :after 方法可能会导致可访问性问题

【解决方案4】：

如果您不关心 internet explorer\edge，那么为删除线实现不同颜色的最简单方法是使用 CSS 属性： text-decoration-color 结合 text-decoration:line-through;

.yourClass {
    text-decoration: line-through !important;
    text-decoration-color: red !important;
}

-- 不适用于 Edge\Internet Explorer

【讨论】：

【解决方案5】：

此 CSS3 将使您更轻松地遍历属性，并且工作正常。

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

【讨论】：

【解决方案6】：

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

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

&lt;s data-text="Strikethrough"&gt;Strikethrough&lt;/s&gt;

【讨论】：

【解决方案7】：

这是一种使用渐变来伪造线条的方法。它适用于多行打击，不需要额外的 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;
}

见小提琴：http://jsfiddle.net/YSvaY/

渐变色标和背景大小取决于行高。（之后我使用 LESS 进行计算和 Autoprefixer...）

【讨论】：

【解决方案8】：

给你：

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

【讨论】：

【解决方案9】：

根据我的经验

<span style='color:red;text-decoration:line-through'>
    <span style='color:black'>black with red strikethrough</span>
</span>

不是最好的选择。我有一个同事在没有测试跨浏览器的情况下使用这种方法，所以我不得不回去修复它，因为它导致了 Firefox 的问题。我个人的建议是使用 :after 选择器来创建删除线。这样，如果您真的想在没有任何样式冲突以及在所有其他浏览器中稳定的情况下，它可以回到 IE8。

它还创建了更少的标记和大致相同数量的样式，在我看来这是一个相当大的问题。

因此，如果其他人遇到类似问题，希望这可以提供帮助：

.lineThrough {
    position: relative;

   &:after {
      content: "  ";
      display: block;
      width: 60px;
      height: 1px;
      background: red;
      position: absolute;
      top: 49%;
      left: 50%;
      margin-left: -30px;
   }
}

显然你可以使用 transform: translate 而不是边距，但这个例子是为了回到 IE8

【讨论】：

【解决方案10】：

Blazemonger 的回复（高于或低于）需要投票 - 但我没有足够的积分。

我想在一些 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;
}

【讨论】：

【解决方案11】：

如果它对某人有帮助，您可以使用 css 属性

text-decoration-color: red;

【讨论】：

【解决方案12】：

单一属性解决方案是：

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

通过属性定义你的颜色。

【讨论】：

【解决方案13】：

将所需的换行颜色分配给父元素也适用于已删除的文本元素 (<del>) - 假设客户端将 <del> 呈现为换行。

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

【讨论】：

【解决方案14】：

只是一个更新，现在可以通过以下方式轻松完成：

text-decoration: underline;
text-decoration: underline dotted;
text-decoration: underline dotted red;
text-decoration: green wavy underline;
text-decoration: underline overline #FF3028;

然后用颜色添加所需的字体颜色： ....

当你将它应用到 React 内联样式时，添加一些对我来说并不明显的东西：

<p style= {{textDecoration:'line-through red', color:'gray'}} >

你需要切换驼峰格的“-”。

这会渲染

的内容

....

灰色，被红线划掉。

更多详情请查看文档here

【讨论】：

【解决方案15】：

这是一个示例 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; }

【讨论】：

哪一部分无效？它适用于所有主要浏览器
“作品”和“有效”相距甚远。浏览器甚至会尝试解释其中包含多个错误的 HTML。见W3C Markup Validation Service、Why is valid HTML important to everyone?、HTML valid DIV attributes? on SO
如果我没记错的话，将属性名称更改为“data-special”应该使其成为有效的 HTML5。
jQuery 添加一个包装以获得彩色删除线？我们变成了什么？！
似乎是一个可能的 XSS 问题：originalPrice 中有纯文本，然后将其作为 HTML 注入回去。尝试使用.html() 而不是.text()。或者也许使用 jQuery 的 wrap().