CSS通过不同的颜色从文本?

小开

最佳答案

是的，通过添加额外的包装元素。为外部元素指定所需的贯穿线颜色，然后将所需的文本颜色分配给内部元素。例如:

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

< p >…或…

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

(但是请注意，<strike>是在HTML4中已弃用，在HTML5中已过时 (参见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似乎需要在:hover生效之前在<a>上设置一些href;FF和基于webkit的浏览器没有)

小开

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

小开

截至2016年2月, css3有下面提到的支持。下面是一个来自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 */
}

< p >导致:

. < / p >

css3可能会使用text-decoration-color财产直接支持。特别是:

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

也可以参见text-decoration-color在css3草案规范。

如果你想立即使用这个方法，你可能必须给它加上前缀，使用-moz-text-decoration-color。(为了向前兼容性，也可以在没有-moz-的情况下指定它。)

小开

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

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

小开

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

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

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

小开

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

参见fiddle: http://jsfiddle.net/YSvaY/

渐变色位和背景大小取决于行高。(我使用LESS进行计算，然后使用自动修复…)

小开

我使用了一个空的: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>

小开

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

小开

根据我的经验

<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上运行的

小开

给你:

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

小开

如果你不关心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一起工作

小开

这个CSS3将使您更容易通过属性线，并工作良好。

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

小开

如果它能帮助别人，你可以使用css属性

text-decoration-color: red;

小开

单一属性解决方案是:

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

通过属性定义线条后的颜色。

小开

只是一个更新，这可以很容易地做到现在做:

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

然后用color: ....添加想要的字体颜色

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

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

您需要将“-”转换为驼峰情况。

这将显示

．...

的内容，颜色为灰色，用红线划掉。

要了解更多详细信息，请查看文档在这里