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

时间:2009-07-10 03:35:40

标签: html css

HTML元素delstrikes都可用于文字删除效果。例子:

<del>del</del>

....给出: del

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

....给出: strike strike

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

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

...也将渲染为: text-decoration:line-through

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

可以使用CSS将线条设为不同的颜色吗?

14 个答案:

答案 0 :(得分:389)

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

<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 HTML5see also W3.org)。建议的方法是使用<del>如果意图删除的真正含义,或者使用带有<s> CSS的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>
(在href生效之前,IE7似乎需要在<a>上设置一些:hover;基于FF和WebKit的浏览器不需要。{p>

答案 1 :(得分:66)

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

导致: Text decoration example


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

答案 2 :(得分:31)

我使用了一个空的:after元素并在其上装饰了一个边框。您甚至可以使用CSS变换将其旋转为斜线。 Result: pure CSS, no extra HTML elements!下行:不包含多行,尽管IMO你不应该在大块文本上使用删除线。

&#13;
&#13;
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);
}
&#13;
<p>Here comes some <strike>strike-through</strike> text!</p>
&#13;
&#13;
&#13;

答案 3 :(得分: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>

答案 4 :(得分: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 ......)

答案 5 :(得分:5)

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

答案 6 :(得分:4)

你走了:

@Service
public class EtudiantServiceImpl {

    @Autowired
    EtudiantRepository etudiantRepository;

    List<Etudiant> lst = new ArrayList<Etudiant>();

    public List<Etudiant> getAllEtudiant() {
        lst =  this.etudiantRepository.findAll();
        return lst;
    }
}

答案 7 :(得分: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:translate而不是margin,但这个例子是回到IE8

答案 8 :(得分: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;
}

答案 9 :(得分:2)

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

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

答案 10 :(得分:1)

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

browser.contextMenus.create({ id: "showtext", title: "Show text", contexts: ["selection"] }); browser.contextMenus.onClicked.addListener(function (info, tab) { switch (info.menuItemId) { case "showtext": { console.log(info.selectionText); // alert() doesn't work here // looking for alternative } } });

答案 11 :(得分:0)

为父元素指定所需的直通颜色也适用于已删除的文本元素(<del>) - 假设客户端将<del>呈现为直通。

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

答案 12 :(得分:0)

单一属性解决方案是:

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

在 line through 属性后定义颜色。

答案 13 :(得分:-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; }