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

268

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

<del>del</del>

....给出： 德尔

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

....给予：罢工和罢工

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

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

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

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

可以使用CSS使线条具有不同的颜色吗？

html  css 
— 五条魔
source
— web-tiki 2015年

Answers:

408

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

<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>
展开摘要

（不过，请注意，HTML4中已弃用该标记，HTML5中已将<strike>其废弃（另请参见W3.org。）。建议的方法是在<del>意图真正删除的情况下使用，否则在CSS中使用<s>元素或样式，text-decoration如这里的第一个示例。）

为了使删除线出现在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似乎需要href在<a>之前设置一些才能:hover生效； FF和基于WebKit的浏览器则不需要。）

— 五条魔
source
8
对于我的“那是不可能的！” 回答。
— 约翰·库格曼
1
jQuery实现将非常有用。
— yakunins 2010年
38
@utype为什么要为此使用jQuery？
— 卡帕2012年
4
包装元素有点烂。在大多数情况下，使用简单的伪元素即可实现几乎相同的效果，即del { position:relative }then del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }。
— 化身
2
只是包装纸。巧妙。哦，天哪，这比我想出的一切（伪元素）要好。很好！
— CunningFatalist 2014年
69

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

导致： 文字修饰示例

CSS 3可能会使用该text-decoration-color属性获得直接支持。特别是：

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

另请参阅text-decoration-colorCSS 3规范草案。

如果您想立即使用此方法，则可能必须使用为其添加前缀-moz-text-decoration-color。（也指定不带-moz-，以实现前向兼容性。）

— 机械蜗牛
source
2
相当乐观。“ CSS 3可能会有”。
— BoltClock
5
@BoltClock：乐观吗？它已经在W3C工作草案中，正在被积极地追求。
— 机械蜗牛
2
根据caniuse的说法，当前（2014年）没有浏览器支持text-decoration-color无前缀的浏览器。
— Blazemonger，2014年
4
3年后... Firefox和Safari达到了20％的覆盖率。
— 安德烈Werlang
1
根据犬只，目前仅受FireFox支持
— YakovL
35

我使用了一个空: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>
展开摘要

— 开拓者
source
@Veve HTML删除线元素 -非语义版本
— Blazemonger，2015年
1
谢谢，我一直在寻找这个，特别是旋转线
— hanan-mstudio
使用：after方法可能会
— 遇到
9

如果您不关心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

— 罗欣德
source
7

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

span{
    text-decoration: line-through;
    text-decoration-color: red;
}
— 毗湿奴
source
6

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

s {
  color: red;
  text-align: -1000em;
  overflow: hidden;
}
s:after {
  color: black;
  content: attr(data-text);
}
<s data-text="Strikethrough">Strikethrough</s>
展开摘要

— 伊博尔莫
source
5

这是一种使用渐变伪造线条的方法。它适用于多行罢工，不需要其他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 ...）

— 辛博
source
3

以我的经验

<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：translation而不是margin，但是此示例将回溯到IE8

— 布雷迪·埃德加
source
2

Blazemonger的回复（高于或低于）需要投票赞成-但我的观点不够。

我想在一些20px宽的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;
}
— Anoldermark
source
-4

这是一个示例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; }
— 阿西米利
source
哪一部分无效？它的工作在所有主要浏览器，虽然
— Aximili
3
“工程”和“有效”彼此相距很远。浏览器甚至尝试解释其中包含多个错误的HTML。请参阅W3C标记验证服务，为什么有效的HTML对每个人都很重要？，HTML有效的DIV属性？在SO上
— kapa
如果我没记错的话，请将属性名称更改为“ data-special”，即可使其成为有效的HTML5。
— Muhd 2012年
13
jQuery添加包装器以获得彩色删除线吗？我们变成了什么？
— 克里斯·贝克
3
似乎是可能的XSS问题：您在中有纯文本originalPrice，然后将其作为HTML注入。尝试使用.html()代替.text()。或者也许使用jQuery的wrap()。
— tuomassalo 2012年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.